NG-点击不AngularJS射击而做的onclick [英] ng-click not firing in AngularJS while onclick does

问题描述

我想在我的应用程序中使用AngularJS并已成功在一定程度上。

I am trying to use AngularJS in my application and have been successful to some extent.

我能够获取数据并显示给用户。而我在 NG-重复通过它我要发布DELETE请求按钮。下面是我的code这做的。

I am able to fetch data and display it to the user. And I have a button in ng-repeat via which I want to post DELETE request. Below is my code which does it.

<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 功能。

This is the FetchViewData function which fetches the information and displays it to the user.

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

中的数据取出，并正确显示。

The data is fetched and properly displayed.

但的code NG点击=deleteRecord（'{{D ['@链接。HREF}}'）不火当删除按钮被点击。在谷歌C​​hrome的开发者工具，我可以看到code {{D ['@链接。HREF}}的code 但产生有效的值 deleteRecord 不被解雇。从 这个问题 我试图消除括号和只写 D [ @link']。HREF 但它并没有为我工作。

But the code in ng-click="deleteRecord('{{d['@link'].href}}')" does not fire when delete button is clicked. In Google Chrome's developer tools I can see valid values are generated for code {{d['@link'].href}} but the code deleteRecord does not get fired. From this question I tried removing the braces and writing only d['@link'].href but it didn't work for me.

当我更换 NG-点击与的onclick 的 deleteRecord 函数被解雇了。

When I replace ng-click with onclick the deleteRecord function gets fired.

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

    $http.delete(docURL);
}

但后来我收到下面的错误。

But then I receive the below error.

Uncaught ReferenceError: $http is not defined
deleteRecord
onclick

我使用jQuery 1.10.2和AngularJS v1.0.8。

I am using jQuery 1.10.2 and AngularJS v1.0.8.

推荐答案

FetchViewData这里是一个控制器，并在你的HTML，您在其中NG-控制器=FetchViewData，你告诉它该控制器的范围内寻找任意角度的方法和变量。

FetchViewData here is a controller, and in your html, where you have ng-controller="FetchViewData", you are telling it to look within that controller's scope for any angular methods and variables.

这意味着，如果你想打电话点​​击的方法，它需要调用连接到控制器的范围的东西。

That means, if you want to call a method on click, it needs to be calling something attached to your controller's scope.

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，你应该能够调用你的方法。

Here, the function exists on the scope, and any html that is inside your FetchViewData Controller has access to that scope, and you should be able to call your methods.

它的工作时，你点击使用，因为在全局命名空间，这是在上单击会看起来存在于您的功能。角是很划定范围严重依赖，让您的命名空间的清洁，还有很多在这里的信息：<一href=\"https://github.com/angular/angular.js/wiki/Understanding-Scopes\">https://github.com/angular/angular.js/wiki/Understanding-Scopes

It's working when you use on-click because your function exists in the global namespace, which is where on-click is going to look. Angular is very heavily reliant on scoping to keep your namespaces clean, there's lots of info here: https://github.com/angular/angular.js/wiki/Understanding-Scopes

这篇关于NG-点击不AngularJS射击而做的onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！