嵌套效果没有实现
<recursion enter-data="treeData">
<ul>
<li ng-repeat="item in treeData">
<div>{{item.name}}</div>
<recursion ng-if="item.child.length" enter-data="treeData" ng-init="treeData=item.child"></recursion>
</li>
</ul>
</recursion>
.directive('recursion', function() {
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: {
treeData: '=enterData'
},
template: '<div ng-transclude></div>',
link : function (scope, element, attrs) {
}
};
})
首先建议你看一下directive中参数transclude的作用。
然后,不建议使用
ng-init="treeData=item.child"
这样的办法将treeData再赋值,直接写enter-data="item.child"
更好。and,在浏览器控制台中审查元素你会发现:并非recursion没有生效,div元素已经替换了recursion,只是div中的内容为空(即使div不为空,recursion中内容为空,指令生效后div内容也会为空),所以看上去就跟没生效一样。