Question

我正在练习angularjs。在下面的例子中，ng-click根本没有触发，不知道为什么。我实际上没有在我的代码中使用任何控制器，可能是因为这样，ng-click没有触发？

的index.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp1">

<div ng-init="users=[{name: 'john', city: 'NY', order: 10},{name: 'james', city: 'washington', order: 20},{name: 'william', city: 'seattle', order: 30}]">

<h2>Customers</h2>

Search Customer: <input type="text" ng-model="searchText" placeholder="search customer here">

    <br><br>
    <table border="2">
        <thead>
            <tr>
                <th ng-click="orderByProperty('name')">Name</th>
                <th ng-click="orderByProperty('city')">City</th>
                <th ng-click="orderByProperty('order')">Order</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in users | filter : searchText | orderBy : orderByProperty : true">
                <td>{{user.name | uppercase}}</td>
                <td>{{user.city}}</td>
                <td>{{user.order | currency}}</td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>

app.js

var myApp1 = angular.module('myApp1',[])

function orderByProperty(propertyName){
    // alert('dsfdf')
    return propertyName;
}

请告诉我上面代码出了什么问题？在代码中使用控制器是强制性的吗？如果不使用，ng-click根本不起作用？

更新当我用“ng-click”替换onclick时，即使被解雇，但排序功能也无效。

UPDATE2：以下是更新后的代码

的index.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp1">


<div ng-controller="MyController">

    <div ng-init="users=[{name: 'john', city: 'NY', order: 10},{name: 'james', city: 'washington', order: 20},{name: 'william', city: 'seattle', order: 30}]">

    <h2>Customers</h2>

    Search Customer: <input type="text" ng-model="searchText" placeholder="search customer here">

        <br><br>
        <table border="2">
            <thead>
                <tr>
                    <th ng-click="orderByProperty('name')">Name</th>
                    <th ng-click="orderByProperty('city')">City</th>
                    <th ng-click="orderByProperty('order')">Order</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="user in users | filter : searchText | orderBy : orderByProperty : true">
                    <td>{{user.name | uppercase}}</td>
                    <td>{{user.city}}</td>
                    <td>{{user.order | currency}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

</body>
</html>

app.js

var myApp1 = angular.module('myApp1',[])

myApp1.controller('MyController', ['$scope', function($scope){

    $scope. orderByProperty = function(propertyName){
        // alert('dsfdf')
        return propertyName;
    }   

}])

上面我使用了控制器，现在甚至连接都会被解雇但排序不按预期工作..

Answer 1

是的，您需要放置 ng-controller 才能 ng-click 工作。

当控制器通过ng-controller连接到DOM时指令，Angular将使用。实例化一个新的控制器对象指定控制器的构造函数。一个新的子范围将是可用作控制器构造函数的可注入参数作为$ scope。

详细了解 controller

Answer 2

正如@Sajeetharan所说，在angularjs中，你调用的所有函数都需要在控制器中声明，这就是它的工作原理

Answer 3

在使用ng-click之前，您必须在HTML中添加ng-controller。

<body ng-app="myApp1" ng-controller="myAppCtrl">

var myApp1 = angular.module('myApp1',[]);

myApp1.controller('myAppCtrl',['$scope',function ($scope) {

$scope.orderByProperty=function(propertyName){
    // alert('dsfdf')
    return propertyName;
}
}]);

Answer 4

要使其有效，需要更改2个位置：使用ng-model值绑定orderBy。

var myApp1 = angular.module('myApp1',[])

myApp1.controller('MyController', ['$scope', function($scope){

    $scope. orderByProperty = function(propertyName){
        $scope.myorder = propertyName;
    }   

}])

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp1">


<div ng-controller="MyController">

    <div ng-init="users=[{name: 'john', city: 'NY', order: 10},{name: 'james', city: 'washington', order: 20},{name: 'william', city: 'seattle', order: 30}]">

    <h2>Customers</h2>

    Search Customer: <input type="text" ng-model="searchText" placeholder="search customer here">

        <br><br>
        <table border="2">
            <thead>
                <tr>
                    <th ng-click="orderByProperty('name')">Name</th>
                    <th ng-click="orderByProperty('city')">City</th>
                    <th ng-click="orderByProperty('order')">Order</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="user in users | filter : searchText | orderBy : myorder : true">
                    <td>{{user.name | uppercase}}</td>
                    <td>{{user.city}}</td>
                    <td>{{user.order | currency}}</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>

</body>
</html>

没有控制器的angularjs ng-click not firing

4 个答案: