AngularJS : Scope is not shared between nested transcluded directives

Question

There are two directives collection and element, both of them transclude it's content, both of them have scope: false (default value).

This directives are used as wrapper on some container and wrapper on some items in that container, and used as follows:

<body ng-app="myApp" ng-controller="MyController">
 <collection>
    <element>inner1</element>
    <element>inner2</element>
    <element>inner3</element>
  </collection>
</body>

This directives are defined like this:

angular.module('myApp', [])
.controller('MyController', function($scope){
    console.log('MyController', $scope.$id);
})
.directive('collection', function($compile){
    return {
        transclude: 'true',
        restrict: 'E',
        template: '<header>header</header><div><ul ng-transclude></ul></div><footer>footer</footer>',
        link: function(scope){
            console.log('collection', scope.$id);
        }
    }
})
.directive('element', function(){
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<li><div ng-transclude></div></li>',
        link: function(scope){
            console.log('element', scope.$id);
        }
    }
});

The problem is that directive element is using not same scope as directive collection, and i can't figure out why.

console output

MyController 003
element 004
element 004
element 004
collection 003

As you can see, MyController is sharing with collection same scope #3, but all element-s use scope #4.

Here is working example: plunkr

Community · Accepted Answer · 2017-05-23 11:51:48Z

2

When you log scope.$id to console in the linking function, you're logging the scope id of the directive itself. However, when you use transclusion in a directive, a new scope is also created for the transcluded content.

enter image description here

This is fairly simple to understand once you see it. Things become a bit more interesting once you set isolate scope on a directive using transclusion.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered May 15, 2014 at 16:10

Marc Kline

9,4091 gold badge35 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

AngularJS : Scope is not shared between nested transcluded directives

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