javascript - Angular Directive(指令)/模板中的递归

Question

我试图构建一个用于显示树的自定义指令。由于某种原因，似乎一旦您将指令包含在自己的模板中， Angular 编译器中就会出现一些疯狂的情况，并且浏览器进程会陷入循环。这是一个笨蛋:

<li class="list-group-item">
<a ng-click="clicked(item)"><span ng-if="item.items" class="glyphicon glyphicon-plus text-primary"></span></a>
<span ng-if="!item.items" class="glyphicon glyphicon-record text-primary"></span>
<a>{{item.name}}</a>
<div ng-if="item.items && item.items.length>0">
    <ul class="list-group"> 
        <taxonomy-item ng-if="item.items && item.items.length>0" ng-repeat="child in item.items"></taxonomy-item>
    </ul>
</div>

如果你注意的话，你会发现它甚至没有绑定(bind)数据，所以它不应该是模型/数据引起的递归循环，而是编译器问题......

http://plnkr.co/edit/1aollcuCr2gA96W6Sk6q

小心，运行可能会卡住您的浏览器选项卡!

关于如何解决此问题有什么建议吗？

Answer 1

解决方案非常简单。由于 Angular 不允许在其内部使用指令，因此您需要使用 link 函数来添加子指令。一个最小的例子:

myApp.directive("myDirective", ["$compile",function($compile){

    var template = '<my-directive ng-repeat="child in item.items" ng-model="child"></my-directive>';

    return{
        templateUrl: "myDirective.html",
        replace: true,
        transclude: true,
        scope: {
            item: "=ngModel"    
        },
        link: function(scope, element){                     
            var compiled = $compile(template)(scope);
            element.append(compiled);
        }
    }   
}]);

这不会造成任何麻烦，因为编译的子指令是独立的并在之后编译。