ng-click 不会在 AngularJS 中触发，而 onclick 会触发

Question

我正在尝试在我的应用程序中使用 AngularJS，并在一定程度上取得了成功。

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

<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>

这是获取信息并将其显示给用户的FetchViewData 函数。

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

数据被提取并正确显示。

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

当我将 ng-click 替换为 onclick 时，deleteRecord 函数被触发。

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

    $http.delete(docURL);
}

然后我收到以下错误。

Uncaught ReferenceError: $http is not defined
deleteRecord
onclick

我正在使用 jQuery 1.10.2 和 AngularJS v1.0.8。

Answer 1

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

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

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);
    }   
}

这里，该函数存在于范围内，您的 FetchViewData 控制器内的任何 html 都可以访问该范围，您应该能够调用您的方法。

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

Answer 2

取而代之

ng-click="deleteRecord('{{d['@link'].href}}')"

试试这个

ng-click="deleteRecord(d['@link'].href)"

您无需在 ng-click 中使用大括号 ({{}})

享受...

Answer 3

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

       $http.delete(docURL);
 }

应该是

 $scope.deleteRecord = function (docURL) {
         console.log(docURL);

         $http.delete(docURL);
}

编辑： 更改 html 和控制器中的某些内容 ....

SEE WORKING DEMO

Answer 4

deleteRecord 方法应该分配在当前正确的范围内

$scope.deleteRecord = function(){
....

Answer 5

ng-click 不触发的另一种可能性是，您将 pointer-events:none; 的 CSS 样式应用于元素。我发现 Bootstrap 的 form-control-feedback 类应用了这种风格。因此，即使它将 z-index 提高 2 以使该元素位于前面以供单击，它也会禁用鼠标单击！

所以要小心你的框架如何交互。

Answer 6

如前所述，函数应该在作用域内创建：

 $scope.deleteRecord = function (docURL) {
         console.log(docURL);

         $http.delete(docURL);
}

要使用该函数，请先删除“{{ }}”，因为您是在 ng-repeat 中使用它。另一个问题是在你的代码中使用撇号，你有两对，一个在另一个......好吧，我相信你会遇到这个问题。

像这样使用函数：

ng-click="deleteRecord(d['@link'].href)"

祝你好运！

Answer 7

如果您想用作提交按钮，请将类型设置为“提交”：

<button type="submit" ...