AngularJS: enable ng-repeat internal directive

Question

I have a directive that translates the original content, parses it, and uses the information in the original content to help create new content. Its essence is as follows:

.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 as follows:

 <list> <item value="foo">bar</item> <item value="baz">qux</item> </list> 

All of this works great. The problem occurs when I try to use ng-repeat inside the contents of a directive, for example:

 <list> <item ng-repeat="item in items" value="{{ item.value }}">{{ item.text }}</item> </list> 

When I try to do this, there are no elements. Does anyone know why this will not work, or if there is a better way to accomplish the same thing?

Answer 1

You can try:

 transcludeFn(scope, function (clone) { iElem.append(clone); }) 

For more details:

HTML:

 <foo data-lists='[lists data here]'> <li ng-repeat="list in lists">{{list.name}}</li> </foo> 

Directive

 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); 

You must let transcludFn know what scope you intend to use in transcludeFn. And if you do not want to use the selection area, you can also try transcludeFn(scope.$parent....)