Angular.js嵌套指令继承

时间:2014-03-26 19:03:02

标签: javascript angularjs angularjs-directive prototypal-inheritance

http://plnkr.co/edit/gNOcFFpTxaTJ6Vhbq9Kp?p=preview

有人可以解释一下我00B

00A怎么办?

enter image description here

这是代码

<div directive-one="['foo', 'bar']">
    <directive-two />
</div>

其中directive_one(00B)有

scope: {
  arr: '=directiveOne' 
}

和directive_two(00A)没有定义scope param。我原以为directive_two会从directive_one继承范围,所以scope.data可以在里面访问。但出于某种原因,它似乎是另一种方式..

1 个答案:

答案 0 :(得分:2)

隔离指令的评估范围

真实范围树是您在Batarang Chrome Dev Tool扩展程序中看到的树。隔离范围不会继承其外部范围,而是使用其$parent属性引用它。

从Angular 1.2.0版开始,使用isolate scope指令编写的元素的范围将根据外部范围进行评估!

官方更改日志是:

  
      
  • $编译:   
        
    • 由于d0efd5ee,在应用程序模板或某些其他指令模板中定义的子元素不会获得隔离范围。从理论上讲,没有人应该依赖这种行为,因为它非常罕见 - 在大多数情况下,isolate指令都有一个模板。
    •   
    • 由于909cabd3,没有隔离范围的指令不会从同一元素上的isolate指令获取隔离范围。如果您的代码依赖于此行为(非隔离指令需要从隔离范围内访问状态),请更改isolate指令以使用作用域locals明确传递这些行为。
    •   
  •   

要理解,请尝试以下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(&lt; 1.2.0):$childId无法读取,因为我们在隔离范围之外的范围内编写了它,而隔离元素中的插值字符串再次评估隔离范围。

002 / 003
003 /
003 /
  • Angular version 1.2.0:针对外部范围评估相同的插值字符串。显示$scopeId

002 / 003
002 / 003
002 / 003


警告!!使用指令模板时不存在这种差异!:使用指令模板,您将获得第一个输出。


您的案例

directiveTwo即使绑定到directiveOne元素的子节点,也不使用隔离范围。