Parent Scope on Transcluded Scoped Directive

[Nate Bauernfeind]

Something is terribly confusing w.r.t. parent scope's inside the body of a transcluded element on a scoped directive.

The short story is that an ng-transclude inside of an ng-repeat completely loses the reference to the parent scope from where the directive is defined. 

Here's a fiddle the demonstrates what I'm talking about: http://jsfiddle.net/pnQyA/

This is the output:

Outside: Hello World.

Inside Directive: Hello World.

Transcluded : Hello World.

Transcluded within '1': Hello World.

Inside (scoped) Directive: Undefined

Transcluded (scoped): Hello World.

Transcluded (scoped) within '1': Undefined

It's the final line that's odd. I get why the inside of the scoped directive is unable to read the member "text". And it also makes sense why "text" is suddenly available inside of the transcluded body (this is the behavior I want). But it does not make sense why an ng-repeat that contains an ng-transclude loses the behavior it has outside of the ng-repeat.

Is this a bug? Or am I trying to do something completely ridiculous in the world of angular? If it's a bug I'd be happy to try and find and fix it, but I need some pointers on where to get started.

[Peter Bacon Darwin]

Hi Nate

This is complex.  I added some more stuff to the fiddle: http://jsfiddle.net/Yd3jk/

I think the problem is that ng-repeat itself is using transclude to create the DOM that it is repeating.  So perhaps by the time it gets to your <span ng-transclude> it doesn't have the original transclude function any more.

Not sure if it is a bug or not!  If not, I am not sure how to work around it.

I suggest submitting an issue and seeing what Igor, Misko and Vojta have to say.

Pete

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[James Cook]

Kind of an old thread, but I am experiencing this problem now with 1.1.5.

I have a similar structure I believe:

<component-1 transclude>

    <ng-repeat>

        <component-2 transclude>

            <div ng-click="$parent.toggle()">

So, the idea is that component-2 has a scope.toggle() function that the nested element should be able to invoke. However, the scopes are created with the following hierarchy:

   > component-1

      > ng-repeat

         > component-2

         > div

So, the surprise is that component-2 and the div w/ ng-click are sibling scope and not parent-child. I assume that since the ng-repeat and component-2 are both transcluding, the ng-repeat has first crack at it and assigns the same scope to both component-2 and the div; then component 2 has its opportunity and carves out a scope for itself.

I'm not sure if that is the right description, but my main question is the same. How can I restore the scope hierarchy I was expecting?

[Nate Bauernfeind]

Rain your fire here: https://github.com/angular/angular.js/issues/1809

Someone gave this as a work around:

angular.module("my").directive('myTransclude', function() {
    return {
        compile: function(tElement, tAttrs, transclude) {
            return function(scope, iElement, iAttrs) {
                transclude(scope.$new(), function(clone) {
                    iElement.append(clone);
                });
            };
        }
    };
});

And then simply use <myTransclude> instead of ng-transclude. In our cases this seems to work.

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/az8_uNV7KyE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.