javascript - angular指令自己相嵌套问题

Question

嵌套效果没有实现
<recursion enter-data="treeData">

<ul>
  <li ng-repeat="item in treeData">
    <p>{{item.name}}</p>
    <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: '<p ng-transclude></p>',
link : function (scope, element, attrs) {

}

};
})

Answer 1

首先建议你看一下directive中参数transclude的作用。
然后，不建议使用ng-init="treeData=item.child"这样的办法将treeData再赋值，直接写enter-data="item.child"更好。
and，在浏览器控制台中审查元素你会发现：并非recursion没有生效，p元素已经替换了recursion，只是p中的内容为空(即使p不为空，recursion中内容为空，指令生效后p内容也会为空)，所以看上去就跟没生效一样。