javascript - how does angular deal with elements with multiple directives -
if element has multiple directives, 1 scope:false, 1 scope:true, 1 scope:{}, how angular deal element?
if include 3 directives asking 3 scope options on same element, error. true , false compatible , use same scope, adding {} causes:
error: [$compile:multidir] multiple directives [isolatedscope, truescope] asking new/isolated scope on: <div false-scope="" true-scope="" isolated-scope=""> in case, true , {} conflict when true tries create new, inheriting scope , {} tries create new, isolated scope, reasonable , perhaps expected. $compile docs say:
if multiple directives on same element request new scope, 1 new scope created.
if have multiple directives scope: true, they're fine , one, scope: {} asks different kind, , angular can't produce both. directives can declared priority, have quietly picked winner, lead sorts of surprises, wisely decided shout it.
here's a plunker demonstrating it. put 3 scopes on single div, declared data in each of them using data available in parent scope. if comment out scope: {}, works fine , can see false , true scopes sharing. haven't investigated whether false or true won out, suspect true because indicates $compile new scope wanted.
html:
<body ng-controller="mainctrl"> <div false-scope true-scope isolated-scope> <b>false directive</b> <ul> <li>loaded: {{ falsedirectiveloaded }}</li> <li>data: {{ falsedirectivedata }}</li> </ul> <b>true directive</b> <ul> <li>loaded: {{ truedirectiveloaded }}</li> <li>data: {{ truedirectivedata }}</li> </ul> <b>isolated directive</b> <ul> <li>loaded: {{ isolateddirectiveloaded }}</li> <li>data: {{ isolateddirectivedata }}</li> </ul> </div> </body> js:
app.controller('mainctrl', function($scope) { $scope.one = 1; $scope.two = 2; $scope.three = 3; }); app.directive('falsescope', function() { return { restrict: 'a', scope: false, link: function(scope, element) { scope.falsedirectiveloaded = true; scope.falsedirectivedata = [scope.one, scope.two, scope.three]; } } }); app.directive('truescope', function() { return { restrict: 'a', scope: true, link: function(scope, element) { scope.truedirectiveloaded = true; scope.truedirectivedata = [scope.one, scope.two, scope.three]; } } }); app.directive('isolatedscope', function() { return { restrict: 'a', scope: {}, link: function(scope, element) { scope.isolateddirectiveloaded = true; scope.isolateddirectivedata = [scope.one, scope.two, scope.three]; } } });
Comments
Post a Comment