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

2021/01/31 05:11 · jquery ·  · 0评论

我正在尝试在应用程序中使用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没有被触发。这个问题中,我尝试去掉花括号并只写东西,d['@link'].href但这对我没有用。

当我更换ng-click使用onclickdeleteRecord功能被炒鱿鱼。

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。

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

代替这个

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

尝试这个

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

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

请享用...

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

       $http.delete(docURL);
 }

它应该是

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

         $http.delete(docURL);
}

编辑:
更改html和控制器中的某些内容。

查看工作演示

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

$scope.deleteRecord = function(){
....

为什么ng-click不触发的另一种可能性是您将CSS样式应用pointer-events:none;到元素。我发现Bootstrap的form-control-feedback类采用了这种样式。因此,即使将增大z-index2以便元素位于单击的最前面,它也会禁用鼠标单击!

因此,请注意您的框架如何相互作用。

如前所述,该函数应在范围内创建:

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

         $http.delete(docURL);
}

要使用该功能,请先放下“ {{}}”,因为您是从ng-repeat内部使用它的。另一个问题是在代码中使用撇号,您在一对内部有两对...嗯,我敢肯定您会遇到问题。

像这样使用函数:

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

祝你好运!

如果要用作提交按钮,请将类型设置为“提交”为:

<button type="submit" ...
本文地址:http://jquery.askforanswer.com/ng-clickbuhuizaiangularjszhongchufaeronclickhuichufa.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!