Angular JS:为什么我的点击事件会触发两次

Angular JS: Why is my click event firing twice?

本文关键字：两次 事件 JS 为什么 我的 Angular      更新时间：2023-09-26

我有以下代码。它在JSON上循环以生成嵌套的ul列表。我有一个点击事件，它执行绑定到锚标记的函数toggleNav（）。我不知道为什么click事件绑定到元素两次。此外，我对angular还很陌生，有没有一份文件可以解释这个概念？谢谢

define([
'/assets/angularapp/AppDirectives.js',
'highstock'
], function (directives) {
directives.directive('collection', function () {
    return {
        restrict: "E",    //declare by element
        replace: true,
        scope: {
            collection: '='
        },
        template: "<ul class='"nav nav-list tree'"><member ng-repeat='"member in collection'" member='"member'"></member></ul>"
    }
})
directives.directive('member', function ($compile) {
    return {
        restrict: "E",
        replace: true,
        scope: {
            member: '='
        },
        template: "<li ng-show='"member.open'"><span><input type='"checkbox'" ng-model='"member.selected'" class='"sideChkbox'"><a class='"tree-toggle'" ng-click='"toggleNav()'"><i class='"icon-chevron-right'"></i>{{member.data}}</a></span></li>",
        controller: function($scope, $element){
            $scope.toggleNav = function(){
                angular.forEach($scope.member.children,function(child,key){
                    if(child.open==true){
                        alert("a")
                        child.open=false;
                    } else {
                        child.open=true;
                        alert("b")
                    }
                })
            }
        },
        link: function (scope, element, attrs) {
            if (angular.isArray(scope.member.children)) {
                 element.append("<collection collection='member.children'></collection>");
                $compile(element.contents())(scope)
            }
        }
    }
})

这是因为您正在编译元素.contents（），包括<a>使用ng-click，应该已经编译好了。当您调用手动编译时，它会再次被编译。

你可以通过这个来修复它：

    ...
    if (angular.isArray(scope.member.children)) {
        var newMemEL = angular.element("<collection collection='member.children'></collection>");
        element.append(newMemEL);
        $compile(newMemEL)(scope);
    }
    ...

看起来你正在尝试创建一个树视图，在这种情况下，最好使用ngInclude，而不是创建自定义指令，看看这个plunker，注意，由于这个问题，它将不适用于Angular 1.2.0rc1。

@DucNguyen先生的答案是正确的，但如果您不想进一步操纵DOM，您可以用另一种方法来处理它。

在链接功能期间将元素标记为已完成，因此当它尝试再次链接时会失败。

link: function (scope, element, attrs) {
    // stop an already linked element from continuing
    if (element.attr('collection-linked')) {
        return;
    }
    // otherwise, add a completed flag to this element
    element.attr('collection-linked', true);
    // continue your linking ...
}
相关文章：