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

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}}')"单击删除按钮后，不会触发其中的代码。在GoogleChrome浏览器的开发人员工具中，我可以看到为代码生成了有效值，{{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都可以访问该作用域，并且您应该能够调用您的方法。

当您使用单击时，它可以正常工作，因为您的函数存在于全局名称空间中，这是单击时的外观。Angular非常依赖范围界定以保持名称空间整洁，这里有很多信息：https : //github.com/angular/angular.js/wiki/Understanding-
Scopes