AngularJS : transclude ng-repeat inside directive

Question

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>

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?

This looks like it can solve your problem. [stackoverflow.com/questions/14388247/… [1]: stackoverflow.com/questions/14388247/… — jim0thy
– jim0thy, Commented Sep 3, 2014 at 10:13

Neaped · Accepted Answer · 2014-11-26 08:39:07Z

2

You may try:

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>

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

answered Nov 26, 2014 at 8:39

Neaped

4455 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS : transclude ng-repeat inside directive

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related