AngularJS:指令分离范围 - 示波器变量不确定

Question

请有人解释我，为什么attrDir的范围变量可见，而 oneWay's却没有？我认为scope: {}也是孤立的。

angular.module('test', []);
angular.module('test').directive('attrDir', attrDir);
function attrDir(){
    return {
        scope: true,
        link: function(scope){
          scope.hello = 'attrDir';
        }
    };
}
angular.module('test').directive('oneWay', oneWay);
function oneWay(){
    return {
        scope: {
          data: '<?'
        },
        link: function(scope){
          scope.hello = 'oneWay';  
        }
    };
}

hello仅在attr-dir中渲染。

<attr-dir>
  <span>{{hello}}</span>
</attr-dir>
<one-way>
  <span>{{hello}}</span>
</one-way>

这是一个plunker：https：//plnkr.co/edit/2cm4vvrshwujvabj2q8t？p = preview

thx。

Answer 1

首先，您要观察到的与<绑定无关。

问题是两个指令中的表达式{{hello}} 不是这些指令模板的一部分。对于此类元素，绑定规则不同。

Angular自动为{{hello}}表达式创建链接函数。但是，在您的情况下，评估这些链接功能的范围不同。

您可能期望的是：

            rootScope
         /             
        /               
attr-dir-new-scope  one-way-isoloate-scope
      /                   
     /                     
{{hello}}               {{hello}}

但是，根据来源中的这一评论：

//我们仅通过孤立范围，如果分离物指令具有 模板，
//否则子元素不属于分离株 指令。

真实的图片是：

             root scope
         /                 
        /                   
attr-dir-new-scope           one-way-isoloate-scope
      /                   
     /                     
{{hello}}               {{hello}}

因此，在您的示例中，第一个指令<attr-dir>不会创建孤立范围，而是创建新范围，因此，当链接到Angular时，将此新范围传递到您的指令的链接功能：

link: function(scope){
     scope.hello = 'attrDir';
}

以及为{{hello}}表达式创建的链接函数。这就是为什么当您在链接函数中添加值时，它可以在表达式链接函数中可用。

但是您的第二个指令<one-way>创建孤立范围，并且根据我上面提到的评论，指令的链接函数获取隔离范围，但是链接表达式的函数接收不同的范围（示例中的根范围）。因此，您要在不同的范围上添加hello值。这就是为什么值不确定的原因。

Answer 2

范围：true和范围：{}将为指令创建一个子范围。但是，

范围：true将原型从母体继承属性（例如指令所在的控制器）：{}不会继承父母的属性，因此称为孤立

单一是一个孤立的范围指令，您没有通过Hello，因此在HTML中不确定。

Answer 3

如果未指定范围，则将共享范围。如果将范围指定为true，则将其继承范围。如果用卷曲支架指定范围，则是孤立范围。

可视化范围的最佳方法是使用console.log语句在您的链接函数中，

link: function(scope) {          
      scope.hello = 'attrDir';
      console.log('scope in attrDir: ', scope);
    }
    link: function(scope) {          
          scope.hello = 'oneWay';
          console.log('scope in oneWay: ', scope);
        }

如果打开开发人员工具，您将看到第一个指令在其原型中继承其父范围

__proto__:Scope 

第二个是一个具有自己范围的对象（通过使用卷曲括号，您给了孤立范围）

__proto__:Object

Answer 4

因为您正在指令中实现组件绑定。

＆lt;符号表示自1.5以来可用的单向绑定。

如果要在one-way中显示hello，则应该更改以下内容：

html

 <one-way hello="$ctrl.hello">
      <span>{{$ctrl.hello}}</span>
    </one-way>

JS

angular.module('test').component('oneWay', {
  bindings:{
    hello:'='
  },
  controller: function() {
    this.hello = 'oneWay';
  }
});

演示

plnkr