我试图获得ng-repeat指令的初始html模板,这是在我的自定义指令中使用的,它包含嵌套的内容。但是实际的html文本是在指令中设置的,我得到的要么是已经编译好的ng-repeat指令,要么是简单的注释,看起来像下面这样:
<!-- ngRepeat: item in items -->
我已经在github上问过这个问题,但不幸的是答案对我来说不是很清楚。有没有办法得到ng-repeat指令模板之前,它得到编译?
这里有一个简单的例子,我正在努力实现(和一个plnkr):
app.directive('parent', function() {
return {
restrict:'E',
template:'<div ng-transclude></div>',
transclude: true,
priority: 1001,
scope: true,
compile: function(element, attrs) {
console.log(element.html());
console.log(element);
}
};
});
<parent>
<div ng-repeat="item in items">
{{item}}
</div>
</parent>
ng-repeat
指令具有' transclude: "element",因此,当它被编译时,整个元素被从DOM中取出(为transclude做准备)并留下注释。
所以,第一个console.log(element.html())
不会看到任何东西,因为你自己的指令的传输没有发生。
但是,即使在链接时检查内部HTML, ngRepeat
将被编译,但它的transclusion尚未发生;当ngRepeat
的scope.$watchCollection
着火时,它就会发生。
因此,查看内容的唯一方法是抢占ngRepeat
的编译。您可以将parent
指令改为terminal: true
,检查内容并手动重新编译。
你也可以添加一个指令,运行在一个优先级高于ngRepeat
的可重复元素上,并获取内容。
(您甚至可以重用"ngRepeat"
名称)
app.directive("ngRepeat", function(){
return {
require: "?^parent", // optionally require your parent
priority: 1010,
compile: function(tElem){
var template = tElem.html();
return function link(scope, element, attrs, ctrls){
var parentCtrl = ctrls;
if (!parentCtrl) return;
// hand it off to the parent controller
parentCtrl.setTemplate(template);
}
}
}
})