AngularJS : Expose ng-repeat scope to ng-transclude

Question

I'm having a template with the following structure (address-contact-info.html):

<dd ng-repeat="contact in contactInfo | limitTo: displayedItems | orderBy:'desc'">
    <span ng-transclude></span>
</dd>

And a directive:

{
    templateUrl: 'address-contact-info.html',
    restrict: 'A',
    scope: {
        contactInfo: '='
    },
    transclude: true,
    link: function (scope, elem, attrs, ctrl, transclude) {
        scope.displayedItems = 1;
    }
};

I want to use the directive like this:

<div address-contact-info contact-info="tel">
    <span>{{contact.number}}</span>
</div>

This means I want to access the ng-repeat scope inside my transcluded elements, but I don't know how to do that.

Do you have any idea how to achieve this, or is there a better way to do that?

Thanks for your help!

Update Here a plunker: http://plnkr.co/edit/4DYEUhHAPuJOLyG9omCT

Update

I found a solution that works for me, though I still have one problem. The elements I want to transclude in the template have their own directives which require a parent directive.

Now when I call the transcludeFn inside my linkFn, I get the following error:

Error: [$compile:ctreq] Controller 'editableGroup', required by directive 'editable', can't be found!

http://plnkr.co/edit/zriVyS7MzheSI8jcYM5d

In this plunker I haven't included the other directives, but I get a transcludeFb related error as well.

Cannot set property 'nodeValue' of undefined

Any reason you want the repeat in the directive template rather than the view? — isherwood
– isherwood, Commented Feb 23, 2015 at 15:37
Yes, because there will be more than just the repeat in the the template. — Sebastian
– Sebastian, Commented Feb 23, 2015 at 16:03

Vinay K · Accepted Answer · 2015-02-23 17:47:17Z

1

<div address-contact-info contact-info="tel">
    <span>{{contact.number}}</span>
</div>

This snippet will be compiled with the scope of the controller which doesn't have a reference to contact. Hence the ng-repeat is not able to display any data.

Even the transcluded content will be compiled with the controller's scope. Not with the scope of the directive.

A hack for this is: http://plnkr.co/edit/clrchL1HLtFQLZ4fctZx?p=preview

This may not be the correct/proper solution.

answered Feb 23, 2015 at 17:47

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

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

2 Comments

Sebastian Over a year ago

Thanks, but I can't use this approach when getting the template asynchronously, right?

Vinay K Over a year ago

You can, Try this.. stackoverflow.com/questions/28666974/…

Collectives™ on Stack Overflow

AngularJS : Expose ng-repeat scope to ng-transclude

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related