是否可以在其自己的模板中再次使用指令?
Is it possible to use a directive again inside its own template?
我正在尝试在 angular 中编写一个 'comments' 指令来加载嵌套注释(来自 Json 数据)并为子 comments/replies 重复使用相同的指令。
父评论自己加载得很好,但是当我尝试通过在其自己的模板中再次使用 'comments' 指令来显示子评论时,应用程序只是冻结,我不得不将其关闭。
下面是我的一些代码:
app.html: ---
<ul ng-repeat="comment in View2.postItems | limitTo: 10">
<comments collection="comment"></comments>
</ul>
comments.html(指令):----
<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>
comments.js:---
var comments = function(){
return {
templateUrl : 'modules/comments/comments.html',
restrict:'E',
scope:{
collection: '='
},
link: function(scope, element, attrs){
}
};
};
您可以使用 $compile
服务构建递归指令,以有条件地附加子指令。示例:(http://plnkr.co/edit/WpNp20DSjJhO412j3cSw?p=preview)
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: '='
}
};
}
我正在尝试在 angular 中编写一个 'comments' 指令来加载嵌套注释(来自 Json 数据)并为子 comments/replies 重复使用相同的指令。
父评论自己加载得很好,但是当我尝试通过在其自己的模板中再次使用 'comments' 指令来显示子评论时,应用程序只是冻结,我不得不将其关闭。
下面是我的一些代码:
app.html: ---
<ul ng-repeat="comment in View2.postItems | limitTo: 10">
<comments collection="comment"></comments>
</ul>
comments.html(指令):----
<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>
comments.js:---
var comments = function(){
return {
templateUrl : 'modules/comments/comments.html',
restrict:'E',
scope:{
collection: '='
},
link: function(scope, element, attrs){
}
};
};
您可以使用 $compile
服务构建递归指令,以有条件地附加子指令。示例:(http://plnkr.co/edit/WpNp20DSjJhO412j3cSw?p=preview)
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: '='
}
};
}