AngularJS:transclude内部指令NG-重复 [英] AngularJS : transclude ng-repeat inside directive
问题描述
我有transcludes原始内容,分析它,并使用原始内容的信息,以帮助建立新的内容的指令。它的主要内容如下:
I have a directive that transcludes the original content, parses it, and uses the information in the original content to help build the new content. The gist of it looks like this:
.directive('list', function() {
return {
restrict: 'E',
transclude: true,
templateUrl: '...',
scope: true,
controller: function($scope, $element, $attrs, $transclude) {
var items;
$transclude(function(clone) {
clone = Array.prototype.slice.call(clone);
items = clone
.filter(function(node) {
return node.nodeType === 1;
})
.map(function(node) {
return {
value: node.getAttribute('value')
text: node.innerHTML
};
});
});
// Do some stuff down here with the item information
}
}
});
然后,我用它是这样的:
Then, I use it like this:
<list>
<item value="foo">bar</item>
<item value="baz">qux</item>
</list>
这一切工作正常这样。当我尝试使用出现该问题的NG-重复
指令里面的内容,如:
This all works fine like this. The problem occurs when I try to use an ng-repeat
inside the directive content, like this:
<list>
<item ng-repeat="item in items" value="{{ item.value }}">{{ item.text }}</item>
</list>
当我尝试这样做,有没有项目。任何人都知道为什么这是行不通的,或有完成同样的事情的一个更好的办法?
When I try to do this, there are no items. Anyone know why this wouldn't work, or if there is a better way of accomplishing the same kind of thing?
推荐答案
您可以尝试:
transcludeFn(scope, function (clone) {
iElem.append(clone);
})
有关位的更多详细信息:
For bit more details:
HTML
<foo data-lists='[lists data here]'>
<li ng-repeat="list in lists">{{list.name}}</li>
</foo>
指令:
var Foo = function() {
return {
restrict: 'E',
template: '...'
transclude: true,
scope: { lists: '=?' }
link: function(scope, iElem, iAttrs, Ctrl, transcludeFn) {
transcludeFn(scope, function (clone) {
iElem.append(clone);
}
}
};
};
.directive('foo', Foo);
您应该让transcludFn知道你要在transcludeFn使用的范围。如果你不希望使用隔离范围,你也可以尝试 transcludeFn(范围。$父....)
You should let transcludFn know which scope you are going to use within transcludeFn. And if you don't want to use isolate scope, you may also try transcludeFn(scope.$parent....)
这篇关于AngularJS:transclude内部指令NG-重复的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!