Question

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

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

<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 Controller中的任何html都可以访问该作用域，并且您应该能够调用您的方法。

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

Answer 2

INSTEAD of this

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

如上所述，该函数应在范围内创建：

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

         $http.delete(docURL);
}

要使用此功能，请首先删除＆＃34; {{}}＆＃34;因为你是在ng-repeat中使用它。另一个问题是在你的代码中使用了撇号，你在另一个内部有两对......我相信你会遇到问题。

使用如下功能：

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

祝你好运！

Answer 6

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

<button type="submit" ...

Answer 7

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

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

当onclick执行时，ng-click不会在AngularJS中触发

7 个答案: