Javascript 是否可以在自己的模板中再次使用指令？

我试图用angular编写一个“comments”指令来加载嵌套的注释（来自Json数据），并对子注释/回复重复使用相同的指令

父注释自己加载得很好，但是当我尝试在自己的模板中再次使用“comments”指令来显示子注释时，应用程序只是冻结，我必须关闭它

下面是我的一些代码：

app.html：---

---

您可以使用

$compile

服务构建递归指令，以有条件地附加子指令。例如：（）

函数注释（$compile）{
返回{
模板：“”，
链接：功能（范围、元素）{
if（angular.isArray（scope.comment.collection））{
元素。追加（$compile（“”）（scope））；
}
}
}
}
函数注释（）{
返回{
模板：“
”，
范围：{
集合：'='
}
};
}

谢谢，这有助于解决问题。

  <ul ng-repeat="comment in View2.postItems | limitTo: 10">

    <comments collection="comment"></comments>

  </ul>

<li>      
  <span>
    {{ collection.data.commentText }}

    <ul ng-show="{{collection.data.replies}}"
        ng-repeat="comment in collection.data.replies.data.children">

      <!-**child comments: this line causes the app to freeze:**-->
      <comments collection="comment"></comments>

    </ul>

  </span>
</li>

var comments = function(){
  return {
    templateUrl : 'modules/comments/comments.html',
    restrict:'E',
    scope:{
      collection: '='
    },
    link: function(scope, element, attrs){

    }
  };
};

function comment($compile) {
    return {
      template: '<span ng-bind="comment.text"></span>',
      link: function(scope, element) {
        if (angular.isArray(scope.comment.collection)) {
              element.append($compile('<comments collection="comment.collection"></comments>')(scope));
        }
      }
    }
}

function comments(){
  return {
    template : '<ul><li ng-repeat="comment in collection"><comment></comment></li></ul>',
    scope:{
      collection: '='
    }
  };
}