ng-click 不会在 AngularJS 中触发，而 onclick 会触发 [英] ng-click not firing in AngularJS while onclick does

问题描述

我正在尝试在我的应用程序中使用 AngularJS，并且在某种程度上取得了成功.

我能够获取数据并将其显示给用户.我在 ng-repeat 中有一个按钮，我想通过它发布 DELETE 请求.下面是我的代码.

<table class="table table-striped" ng-controller="FetchViewData"><tr><td>姓名</td><td>ID</td><td>部门</td><td></td></tr><tr ng-repeat="d in viewData"><td>{{d.EmployeeName}}</td><td>{{d.EmployeeID}}</td><td>{{d.EmployeeDepartment}}</td><td><button class="trashButton" type="button"名称="视图:_id1:_id2:_id14:_id24:btnDelete"id="视图:_id1:_id2:_id14:_id24:btnDelete"ng-click="deleteRecord('{{d['@link'].href}}')"><img src="/trashicon.gif"></button></td></tr>

这是 FetchViewData 函数，它获取信息并将其显示给用户.

function FetchViewData($scope, $http) {var test_link = "<我的链接>";$http.get(test_link).success(函数(数据){$scope.viewData = 数据；});}

数据被获取并正确显示.

但是 ng-click="deleteRecord('{{d['@link'].href}}')" 中的代码在点击删除按钮时不会触发.在 Google Chrome 的开发人员工具中，我可以看到为代码 {{d['@link'].href}} 生成了有效值，但代码 deleteRecord 不会被触发.从 这个问题 我试着去掉大括号，只写 d['@link'].href 但它对我不起作用.

当我用 onclick 替换 ng-click 时，deleteRecord 函数被触发.

function deleteRecord(docURL) {控制台日志(docURL)；$http.delete(docURL);}

但后来我收到以下错误.

Uncaught ReferenceError: $http 未定义删除记录点击

我使用的是 jQuery 1.10.2 和 AngularJS v1.0.8.

解决方案

FetchViewData 这里是一个控制器，在你的 html 中，你有 ng-controller="FetchViewData"，你告诉它在该控制器的范围内查找任何角度方法和变量.

这意味着，如果你想在点击时调用一个方法，它需要调用一些附加到你的控制器范围的东西.

function FetchViewData($scope, $http) {var test_link = "<我的链接>";$http.get(test_link).success(函数(数据){$scope.viewData = 数据；});$scope.deleteRecord = function(docURL) {控制台日志(docURL)；$http.delete(docURL);}}

在这里，该函数存在于作用域中，并且您的 FetchViewData 控制器内的任何 html 都可以访问该作用域，并且您应该能够调用您的方法.

当您使用 on-click 时它会起作用，因为您的函数存在于全局命名空间中，这是 on-click 将要查看的位置.Angular 非常依赖作用域来保持命名空间干净，这里有很多信息:https://github.com/angular/angular.js/wiki/Understanding-Scopes

I am trying to use AngularJS in my application and have been successful to some extent.

I am able to fetch data and display it to the user. And I have a button in ng-repeat via which I want to post DELETE request. Below is my code which does it.

<div class="navbar-collapse collapse">
    <table class="table table-striped" ng-controller="FetchViewData">
        <tr>
            <td>Name</td>
            <td>ID</td>
            <td>Department</td>
            <td></td>
        </tr>
        <tr ng-repeat="d in viewData">
            <td>{{d.EmployeeName}}</td>
            <td>{{d.EmployeeID}}</td>
            <td>{{d.EmployeeDepartment}}</td>
            <td>
                <button class="trashButton" type="button" 
                name="view:_id1:_id2:_id14:_id24:btnDelete" 
                id="view:_id1:_id2:_id14:_id24:btnDelete" 
                ng-click="deleteRecord('{{d['@link'].href}}')">
                <img src="/trashicon.gif"></button>
            </td>
        </tr>
    </table>
</div>

This is the FetchViewData function which fetches the information and displays it to the user.

function FetchViewData($scope, $http) {
    var test_link = "<MY LINK>";
    $http.get(test_link).success( function(data) {
        $scope.viewData = data;
    });
}

The data is fetched and properly displayed.

But the code in ng-click="deleteRecord('{{d['@link'].href}}')" does not fire when delete button is clicked. In Google Chrome's developer tools I can see valid values are generated for code {{d['@link'].href}} but the code deleteRecord does not get fired. From this question I tried removing the braces and writing only d['@link'].href but it didn't work for me.

When I replace ng-click with onclick the deleteRecord function gets fired.

function deleteRecord(docURL) {
    console.log(docURL);

    $http.delete(docURL);
}

But then I receive the below error.

Uncaught ReferenceError: $http is not defined
deleteRecord
onclick

I am using jQuery 1.10.2 and AngularJS v1.0.8.

解决方案

FetchViewData here is a controller, and in your html, where you have ng-controller="FetchViewData", you are telling it to look within that controller's scope for any angular methods and variables.

That means, if you want to call a method on click, it needs to be calling something attached to your controller's scope.

function FetchViewData($scope, $http) {
    var test_link = "<MY LINK>";
    $http.get(test_link).success( function(data) {
        $scope.viewData = data;
    });
    $scope.deleteRecord = function(docURL) {
        console.log(docURL);

        $http.delete(docURL);
    }   
}

Here, the function exists on the scope, and any html that is inside your FetchViewData Controller has access to that scope, and you should be able to call your methods.

It's working when you use on-click because your function exists in the global namespace, which is where on-click is going to look. Angular is very heavily reliant on scoping to keep your namespaces clean, there's lots of info here: https://github.com/angular/angular.js/wiki/Understanding-Scopes

这篇关于ng-click 不会在 AngularJS 中触发，而 onclick 会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！