An isolated-scoped-directive's ng-transclude loses parent scope when inside of an ng-repeat.

[nbauernfeind]

The fiddle: http://jsfiddle.net/nCfBA/

To reproduce in short: 1) transcluded element needs to reference something in its parent scope, 2) directive's template needs to transclude inside of an ng-repeat. The transcluded element cannot read its original parent scope.

If included outside of the ng-repeat it can read the value in the parent scope (as one would expect).

I posted this to a google group (https://groups.google.com/forum/#!topic/angular/az8_uNV7KyE) but was directed to post it as a possible bug.

I don't mind trying to tackle and fix this, but I really have no idea where to start looking.

[nbauernfeind]

This issue still exists in 1.0.5. Updated fiddle: http://jsfiddle.net/nCfBA/1/

I'd be happy to fix this, but don't know where to begin.

[unscene]

+1

[MarcoPil]

+1
I have spend two days to find out that the problem was a combination of transclusion, isolated scope and ng-repeat :-(

[nbauernfeind]

I'm still happy to try and fix this =).

[cristatus]

I am facing exactly the same issue. I think the problem is the $transclude function that keeps the reference of outer scope. I have created a new directive (replacement for ng-transclude) that uses correct scope.

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

However, I am not sure whether this is the correct solution but at least it's working fine for our use cases.

[oravecz]

Wow, thanks cristatus. That fixed my problem also where I had two directives on an element and one of those directives (vertical-center) had a transclude that was screwing up the other element's access to a parent scope. The directive with the transclude is shown here. Something pretty simple that enables dynamic blocks to be vertically centered within other blocks. Switching ng-transclude to my-transclude did the trick.

directive( 'verticalCenter', function () {
    return {
        restrict : 'AC',
        template : ' \
            <div style="display: table; width: 100%; height: 100%"> \
                <div style="display: table-cell; vertical-align:middle;" my-transclude> \
                </div>\
            </div>',
        transclude : true,
        scope: false
    }
});

[paynen]

+1

[cristatus]

Looks like it's fixed in master 45f9f62

[petebacondarwin]

Not sure if it is: http://jsfiddle.net/33jQz/

[gustavohenke]

@petebacondarwin, I'm also a "victim" of this. Do you know of any quick fix for this?

[nbauernfeind]

@gustavohenke Did you try the quick fix from @cristatus?

[rrimer]

+1

[cztomsik]

it's still there.

ng-transclude with ng-if inside of directive with transclude: true & isolate scope.

[YourDeveloperFriend]

I was able to recreate this with ng-if:

http://jsfiddle.net/WqD7E/2/

and I can confirm that this line (https://github.com/angular/angular.js/blob/master/src/ng/directive/ngIf.js#L93) within ng-if is calling scope.$new() on a child scope of my directive, and not of the parent scope as you would expect. I bet that's what's happening within ngRepeat as well.

Here is how I overcame this. It sucks, but it works:

.directive('alteredTransclude', function() {
  return {
    compile: function(tElem, tAttrs, transclude) {
      return function(scope, elem, attrs) {
        var newScope = scope.$parent.$parent.$new(); // Call $parent to get to the scope you want
        transclude(newScope, function(clone) {
          elem.append(clone);
        });
      };
    }
  };
})