AngularJS:指令隔离范围 - 范围变量未定义 [英] AngularJS: Directive isolate scope - scope variable undefined

问题描述

请谁能解释一下，为什么 attrDir 的范围变量是可见的，而 oneWay 的不可见?我认为 scope: {} 也是孤立的.

Please, can someone explain me, why attrDir's scope variable is visible, and oneWay's not? I thought that scope: {} is isolated as well.

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=预览

Here is a plunker: https://plnkr.co/edit/2CM4vVRshWuJvaBj2q8T?p=preview

谢谢.

推荐答案

首先，您所观察到的与 < 绑定无关.

First, what you're observing has nothing to do with < binding.

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

The problem is that the expression {{hello}} inside both directives are not part of the template of these directives. And for such elements the rules for bindings are different.

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

Angular automatically creates link functions for {{hello}} expressions. But the scopes against which these link functions are evaluated are different in your cases.

您可能期望的是:

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

但是，根据 此评论来源:

//我们只传递隔离作用域，如果隔离指令有一个template,
//否则子元素不属于isolate指令.

// We only pass the isolate scope, if the isolate directive has a template,
// otherwise the child elements do not belong to the isolate directive.

真实照片是这样的:

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

所以在你的例子中，第一个指令 <attr-dir> 不会创建隔离作用域，而是创建新的作用域，所以当链接 angular 时，将这个新作用域传递给您的指令:

So in your example, the first directive <attr-dir> doesn't create isolate scope, but creates new scope, so when linking angular passes this new scope both to the linking function of your directive:

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

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

and to the linking function created for the {{hello}} expression. That's why when you add a value in your linking function it's available in the expression linking function.

但是你的第二个指令 创建了 isolate scope 并且根据我上面提到的注释，指令的链接功能被 隔离范围，但表达式的链接函数接收不同的范围(在您的示例中为根范围).所以你在不同的范围内添加 hello 值.这就是该值未定义的原因.

But your second directive <one-way> creates isolate scope and according to the comment I mentioned above, the linking function of the directive gets isolated scope as it should, but the linking function of the expression receives different scope (root scope in your example). So you're adding hello value on different scopes. That's why the value is undefined.

这篇关于AngularJS:指令隔离范围 - 范围变量未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！