javascript – Angular JS：为什么我的点击事件会被触发两次？

我有以下代码.它循环遍历 JSON以生成嵌套的ul列表.我有一个click事件,它执行绑定到锚标记的函数toggleNav().我不知道为什么click事件被绑定到元素两次.另外我是棱角分明的新手,是否有一个文件解释了这个概念？谢谢！

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)
            }
        }
    }
})

解决方法

这是因为你正在编译element.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,因为这个issue

原文地址：https://www.jb51.cc/js/159074.html