AngularJS:它被编译之前,如何获得纳克重复指令模板? [英] AngularJS : How to get ng-repeat directive template before it gets compiled?
问题描述
我试图获得该是trancludes嵌套的内容我自定义指令内所使用的NG-重复指令最初的HTML模板。而是被设置我得到或者已经编译指令NG重复指令或仅仅是看起来像下面的注释内的实际HTML文本:
< - ngRepeat:在项目的项目 - >
我已经要求在 github上这个问题,但遗憾的是,答案WASN T代表我很清楚。有没有办法让NG-重复指令模板,它被编译过吗?
下面是什么,我想实现一个简单的例子(和 plnkr )
app.directive(父,函数(){
返回{
限制:'E',
模板:'< DIV NG-transclude>< / DIV>,
transclude:真实,
优先级:1001
适用范围:真,
编译:功能(元素,ATTRS){
的console.log(element.html());
的console.log(元);
}
};
});
<母体GT;
< DIV NG重复=项中的项目>
{{项目}}
< / DIV>
< /母体GT;
NG-重复
指令有`transclude:元素,所以,当它被编译,整个元素取出DOM(以preparation为包含)和注释留。
所以,第一个的console.log(element.html())
将看不到任何东西,因为你自己的指令的transclusion并没有发生。
但即使你检查在链接时的内部HTML中, ngRepeat
将被编译,但其transclusion也没有发生;后来发生了,当范围。$ watchCollection
ngRepeat
火灾。
所以,看到的内容的唯一方法是preempt ngRepeat
的汇编。你可以让你的父
指令端子:真正的
,检查的内容,并手动重新编译
您也可以使用较高的优先级添加一个可重复的元素上运行指令比 ngRepeat
并获得内容。
(你甚至可以重复使用ngRepeat
名)
app.directive(ngRepeat功能(){
返回{
要求:^父,//可选需要你的父母
优先级:1010,
编译:功能(特莱姆){
变种模板= tElem.html();
返回功能链接(范围,元素,ATTRS,ctrls监视){
VAR parentCtrl = ctrls监视; 如果(parentCtrl!)回报; //它交给父控制器
parentCtrl.setTemplate(模板);
}
}
}
})
I'm trying to get the initial html template for the ng-repeat directive that is used inside my custom directive which trancludes nested content. But instead the actual html text that was set inside the directive I get either already compiled ng-repeat directive or simply a comment that looks like the following:
<!-- ngRepeat: item in items -->
I already asked that question at github, but unfortunately the answer wasn't very clear for me. Is there a way to get ng-repeat directive template before it gets compiled?
Here's a simple example of what I am trying to achieve (and a 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
directive has `transclude: "element", and so, when it is compiled, the entire element is taken out of DOM (in preparation for transclusion) and a comment is left.
So, the first console.log(element.html())
won't see anything, since the transclusion of your own directive hasn't happened.
But even if you examine the inner HTML at link-time, the ngRepeat
will have been compiled, but its transclusion would not yet happen; it happens later, when scope.$watchCollection
of ngRepeat
fires.
So, the only way to see the content is to preempt the compilation of ngRepeat
. You can either make your parent
directive terminal: true
, examine the contents and manually re-compile.
You can also add a directive that runs on a repeatable element with higher priority than ngRepeat
and get the contents.
(You could even reuse the "ngRepeat"
name)
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);
}
}
}
})
这篇关于AngularJS:它被编译之前,如何获得纳克重复指令模板?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!