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