如果一个元素有多个指令,一个有scope:false
,一个有scope:true
,一个有scope:{}
,角度如何处理这个元素?
答案 0 :(得分:2)
如果在同一元素中包含要求所有三个范围选项的所有三个指令,则会出现错误。 true
和false
兼容并使用相同的范围,但添加{}
会导致:
Error: [$compile:multidir] Multiple directives [isolatedScope, trueScope]
asking for new/isolated scope on:
<div false-scope="" true-scope="" isolated-scope="">
在这种情况下,当true
尝试创建新的继承范围并{}
尝试创建新的隔离范围时,true
和{}
会发生冲突,合理的,也许是预期的$compile docs说:
如果同一元素上的多个指令请求新范围,则只创建一个新范围。
如果您有scope: true
的多个指令,那么它们很好并且只有一个,但是scope: {}
要求另外一种,而Angular不能生成两者。指令可以用priority
声明,所以他们可以悄悄选择一个胜利者,但这会带来各种各样的惊喜,所以他们明智地决定对此大喊大叫。
这里a Plunker证明了这一点。我将所有三个范围放在一个div
上,然后使用父范围中可用的数据在每个范围中声明数据。如果您对scope: {}
发表评论,则表明其工作正常,您可以看到false
和true
范围共享。我还没有调查false
或true
是否胜出,但我怀疑true
因为它向$compile
表示需要新的范围。
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];
}
}
});
答案 1 :(得分:0)
当JS使用duck typing时,范围可以接收任何类型的值,尽管它们可以过滤角度接受的值。
考虑到这一点,当角度接收范围时,我猜it verifies the type of the argument,并对其进行威胁。
*我想它只接受JSON