如何通过ngRepeat＆QUOT;模板＆QUOT;到ngDirective使用transclude？ [英] How to pass ngRepeat "template" to a ngDirective using transclude?
问题描述
演示： http://plnkr.co/edit/TiH96FCgOGnXV0suFyJA?p=preVIEW
我有一个NG-指令称为myDirective和指令模板中我一直在使用NG-重复印刷的李标签的列表。我想李标记的内容声明为myDirective的声明的一部分，并使用transclude打印所需的文本/ HTML内容。这样我可以有关注一个很好的分离，使我的指令并不需要知道源项目的结构，这将是调用者的责任，布局里的内容。
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.
喜欢的东西如下：
<my-directive source="vm.source">{{label}} and {{id}}</my-directive>
甚至
<my-directive source="vm.source"><a href="#{{id}}">{{label}}</a></my-directive>
ngRepeat的（内部myDirective）模板看起来像
The template of ngRepeat (inside myDirective) looks like
template: '<ul><li ng-repeat="item in source" ng-transclude></li></ul>',
但我不能让transclusion为HG-重复内工作。我使用的是最新版本1.2.19角。要precise的trasnclusion作品，但不是前pression我传递在指令的水平。
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.
请帮助和感谢堆！
我不能想出一个更好的问题标题。欢迎您做的更好。
I couldn't come up with a better question title. You are welcome to make it better.
更新：我选择通过@pixelbits的答案，因为这是我要求的。但我实际上@Norguard使用的方法，因为它更棱角分明的方式。
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内容编译反对你的父母范围的子范围（也称为transclusion范围，但这并不等同于你的指令的隔离范围内）。话虽这么说，你可以在你父母的HTML指定模板（虽然它是正常使用的情况下，角以外的位）和手动编译对你的指令的隔离范围。
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>
请注意，我-指令引用了'项目'，它必须在指令的范围被定义的内部HTML。
Notice that the inner HTML of my-directive references 'item' which must be defined in the directive's scope.
指令
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＆QUOT;模板＆QUOT;到ngDirective使用transclude？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
