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

时间:2017-05-02 06:30:49

标签: javascript angularjs

我正在练习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;
    }   

}])

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

4 个答案:

答案 0 :(得分:2)

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

  

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

详细了解 controller

答案 1 :(得分:0)

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

答案 2 :(得分:0)

在使用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;
}
}]);

答案 3 :(得分:0)

要使其有效,需要更改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>