Angular.js嵌套指令继承
[英]Angular.js nested directives inheritance
问题描述
http://plnkr.co/edit/gNOcFFpTxaTJ6Vhbq9Kp?p=preview
有人可以解释我00B如何在00A
这是代码
<div directive-one="['foo', 'bar']">
<directive-two />
</div>
其中directive_one（00B）有
scope: {
arr: '=directiveOne'
}
和directive_two（00A）没有定义scope参数。 我原以为directive_two会从directive_one继承范围，所以scope.data可以在里面访问。 但由于某种原因，它似乎是另一种方式..
1 个解决方案
解决方案1
2 已采纳 2014-03-26 22:10:13
隔离指令的评估范围
真实范围树是您在Batarang Chrome Dev Tool扩展中看到的树。 隔离范围不会继承其外部范围，而是使用其$parent属性引用它。
从Angular 1.2.0版开始，使用isolate scope指令编写的元素的范围将根据外部范围进行评估！
官方更改日志是：
- $编译：
- 由于d0efd5ee，在应用程序模板或某些其他指令模板中定义的子元素不会获得隔离范围。 从理论上讲，没有人应该依赖这种行为，因为它非常罕见 - 在大多数情况下，isolate指令都有一个模板。
- 由于909cabd3，没有隔离范围的指令不会从同一元素上的isolate指令获得隔离范围。 如果您的代码依赖于此行为（非隔离指令需要从隔离范围内访问状态），请更改isolate指令以使用范围本地明确地传递这些。
要理解，请尝试以下HTML：
<body ng-app="plunker">
{{$id}} / {{$childId}}
<div isolate-dir>
{{$id}} / {{$childId}}
<div not-isolate-dir>
{{$id}} / {{$childId}}
</div>
</div>
</body>
使用以下JS：
angular.module('plunker', [])
.directive('isolateDir', function() {
return {
scope: {},
link: function(scope) {
scope.$parent.$childId = scope.$id;
}
}
})
.directive('notIsolateDir', function() {
return { };
});
见Plunker 。
在那里，我们将此范围外的隔离范围$id公开为$childId范围属性。
现在比较这些输出：
- Angular版本1.2.0rc1（<1.2.0）：
$childIdchildId无法读取，因为我们在隔离范围之外的范围内编写它，隔离元素中的插值字符串评估隔离范围。
002 / 003
003 /
003 /
- Angular 1.2.0版：相对于外部范围评估相同的插值字符串。
$scopeId显示！
002 / 003
002 / 003
002 / 003
警告 ！！ 使用指令模板时不存在这种差异！ ：使用指令模板，您将获得第一个输出。
你的情况
directiveTwo即使绑定到directiveOne元素的子节点也不使用isolate范围。
没有标记的Angular.js嵌套指令
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.