22

我正在尝试在我的应用程序中使用 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没有被触发。从这个问题中，我尝试删除大括号并只写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。

4

7 回答 7

26

这里的 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

于 2013-10-22T08:22:53.717 回答
6

取而代之的是

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

尝试这个

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

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

请享用...

于 2014-03-19T08:16:22.067 回答
4 
  function deleteRecord(docURL) {
       console.log(docURL);

       $http.delete(docURL);
 }

它应该是

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

         $http.delete(docURL);
}

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

查看工作演示

于 2013-10-22T08:20:55.623 回答
3

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

$scope.deleteRecord = function(){
....
于 2013-10-22T08:19:16.917 回答
1

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

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

于 2016-11-10T22:29:04.800 回答
0

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

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

         $http.delete(docURL);
}

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

像这样使用函数：

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

祝你好运！

于 2014-01-26T10:58:04.390 回答
0

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

<button type="submit" ...
于 2015-04-01T13:54:51.670 回答