如何通过ngRepeat“模板"使用 transclude 到 ngDirective? [英] How to pass ngRepeat "template" to a ngDirective using transclude?
问题描述
演示:http://plnkr.co/edit/TiH96FCgOGnXV0suFyJA?p=preview
我有一个名为 myDirective 的 ng 指令，在指令模板中，我有一个使用 ng-repeat 打印的 li 标签列表.我想将 li 标签的内容声明为 myDirective 声明的一部分，并使用 transclude 打印所需的文本/html 内容.通过这种方式，我可以很好地分离关注点，这样我的指令就不需要知道源项的结构，而布局 li 的内容将是调用者的责任.
类似于以下内容:
{{label}} 和 {{id}} 甚至
<my-directive source="vm.source"><a href="#{{id}}">{{label}}</a></my-指令>ngRepeat 的模板(在 myDirective 中)看起来像
template: '- </li></ul>',
但我无法让嵌入在 hg-repeat 中工作.我使用的是最新版本的 angular 1.2.19.准确地说，transnclusion 有效，但不是我在指令级别传递的表达式.
请帮助和感谢堆！
我想不出更好的问题标题.欢迎您改进.
更新:我选择了@pixelbits 的答案，因为这就是我的要求.但我实际上使用了 @Norguard 的方法，因为它更有角度.
嵌入的内容是针对父作用域的子作用域(也称为嵌入作用域，但这与指令的隔离作用域不同)编译的.话虽如此，您可以在父 HTML 中指定模板(尽管它有点超出 angular 的正常用例)并针对指令的隔离范围手动编译它.
HTML
<div ng-controller="myController as vm"><my-directive source="vm.source"><span>{{item.label}} 和 {{item.id}}</span></my-directive>请注意，my-directive 的内部 HTML 引用了必须在指令范围内定义的item".
指令
函数指令($compile){返回 {限制:'E'，范围: {来源:'='},编译:函数(元素，属性){//在编译阶段，删除内容//元素的，这样它就不会被 angular 编译.//我们将在链接函数中手动编译它.var template = angular.element('<ul><li ng-repeat="源中的项目">' + element.html() + '</li></ul>');element.empty();//链接函数返回函数(范围，元素，属性){//添加模板element.append(模板);//针对隔离范围编译和链接模板.$编译(模板)(范围)；}}};}Demo: http://plnkr.co/edit/TiH96FCgOGnXV0suFyJA?p=preview
I have a ng-directive called myDirective and within the directive template I have a list of li tags printed using ng-repeat. I want to declare the content of li tag as part of the declaration of myDirective and use transclude to print the desired text / html content. This way I can have a nice separation of concerns so that my directive doesn't need to know the structure of the source item, and it'll be the caller's responsibility to layout the content of li.
Something like below:
<my-directive source="vm.source">{{label}} and {{id}}</my-directive>
or even
<my-directive source="vm.source"><a href="#{{id}}">{{label}}</a></my-directive>
The template of ngRepeat (inside myDirective) looks like
template: '<ul><li ng-repeat="item in source" ng-transclude></li></ul>',
But I can't get the transclusion to work inside hg-repeat. I am using the latest version of angular 1.2.19. To be precise, the trasnclusion works but not the expression I am passing in at directive level.
Please help and thanks heaps!
I couldn't come up with a better question title. You are welcome to make it better.
Update: I chose the answer by @pixelbits because that's what I was asking for. But I actually used approach by @Norguard because it is more angular way.
Transcluded contents are compiled against a child scope of your parent scope (also known as transclusion scope, but this is not the same as your directive's isolated scope). That being said, you can specify the template in your parent HTML (although it is a bit outside of the normal use case in angular) and manually compile it against your directive's isolated scope.
HTML
<body ng-app="myApp">
<div ng-controller="myController as vm">
<my-directive source="vm.source">
<span>{{item.label}} and {{item.id}}</span>
</my-directive>
</div>
</body>
Notice that the inner HTML of my-directive references 'item' which must be defined in the directive's scope.
Directive
function directive($compile) {
return {
restrict: 'E',
scope: {
source: '='
},
compile: function(element, attr) {
// in the compile phase, remove the contents
// of element so that it is not compiled by angular.
// We will be manually compiling it in the link function.
var template = angular.element('<ul><li ng-repeat="item in source">' + element.html() + '</li></ul>');
element.empty();
// link function
return function(scope, element, attr) {
// append the template
element.append(template);
// compile and link the template against the isolated scope.
$compile(template)(scope);
}
}
};
}
这篇关于如何通过ngRepeat“模板"使用 transclude 到 ngDirective?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
