我有以下代码.它循环遍历
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