![transclusion]( "transclusion")
本文介绍了AngularJS:如何在编译之前获取 ng-repeat 指令模板?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试获取在我的自定义指令中使用的 ng-repeat 指令的初始 html 模板，该指令包含嵌套的内容.但是，在指令中设置的实际 html 文本，我要么已经编译过 ng-repeat 指令，要么只是一个如下所示的注释:
我已经在 github 上问过这个问题，但不幸的是答案是'对我来说很清楚.有没有办法在编译之前获取 ng-repeat 指令模板?
这是我想要实现的一个简单示例(以及 plnkr):
app.directive('parent', function() {返回 {限制:'E'，模板:'<div ng-transclude></div>',转置:真实，优先级:1001，范围:真实，编译:函数(元素，属性){console.log(element.html());控制台日志(元素)；}};});
<div ng-repeat="项目中的项目">{{物品}}
</父母>
解决方案
ng-repeat 指令有 `transclude: "element"，所以编译的时候会把整个元素取出来DOM(准备嵌入)并留下评论.
因此，第一个 console.log(element.html()) 不会看到任何东西，因为您自己的指令的嵌入还没有发生.
但即使你在链接时检查内部 HTML，ngRepeat 也将被编译，但它的嵌入还不会发生；它发生在稍后，当 ngRepeat 的 scope.$watchCollection 触发时.
所以，看到内容的唯一方法就是抢占ngRepeat的编译.您可以使 parent 指令 terminal: true，检查内容并手动重新编译.
您还可以添加一个指令，该指令在优先级高于 ngRepeat 的可重复元素上运行并获取内容.
(您甚至可以重复使用 "ngRepeat" 名称)
app.directive("ngRepeat", function(){返回 {require: "?^parent",//可选地要求你的父母优先级:1010，编译:函数(tElem){var 模板 = tElem.html();返回函数链接(范围，元素，属性，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);
}
}
}
})
Demo
这篇关于AngularJS:如何在编译之前获取 ng-repeat 指令模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！