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>

这是个笨蛋: https://plnkr.co/edit/2CM4vVRshWuJvaBj2q8T?p=预览

谢谢.

推荐答案

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

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}}

但是，根据此评论中来源:

///如果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.

但是您的第二个指令<one-way>创建了隔离范围，根据我上面提到的注释，该指令的链接功能会按需获取隔离范围，但是表达式的链接功能会收到不同范围(在您的示例中为根范围).因此，您要在不同的作用域上添加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屋！