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

Question

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

我能够获取数据并将其显示给用户.我在ng-repeatvia中有一个按钮,我想发布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不会被触发.从这个问题我尝试删除括号和写作,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的这个

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

试试这个

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

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

请享用...