javascript - Angular JS : Why is my click event firing twice?

Question

我有以下代码。它遍历 JSON 以生成嵌套的 ul 列表。我有一个执行绑定(bind)到 anchor 标记的函数 toggleNav() 的单击事件。不知道为什么click事件会两次绑定(bind)到元素上。我也是 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)
            }
        }
    }
})

Answer 1

因为你正在编译 element.contents()，包括带 ng-click 的 ，应该已经编译好了。在您调用手动编译时，它会再次编译。

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

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

看起来你正在尝试创建一个 TreeView ，在这种情况下，最好使用 ngInclude与其创建自定义指令，不如看看这个 plunker ，请注意，由于这个 issue，它不适用于 Angular 1.2.0rc1