关于javascript：AngularJS：=@&的区别


What is the difference between & vs @ and = in angularJS

我对安古拉基斯很陌生。有人能解释一下这些AngularJS操作符的区别吗：当用适当的例子隔离作用域时，&, @ and =。

相关讨论

@允许定义的属性值的指令的指令传递到分离的范围。价值的可能是一个简单的字符串值(myattr="hello")或它可能是在一个嵌入式angularjs interpolated字符串表达式(myattr="my_{{helloText}}")。认为它作为"单向"通信范围从父到子指令。约翰有一系列的短视频林奎斯特解释每个研究。视频点播"在这里：http：／／／／angularjs株egghead.io教训范围属性的结合

&菌株可以通过指令的范围值到父的评价表达定义的范围中的属性。注意，在implicitly指令属性是在表达和不表达的语法使用双卷曲的支撑。这是一个在一个更严厉的解释文本。视频点播&；在这里：http：／／／／egghead.io教训angularjs株表达结合的范围

集合A上=双向结合的分离株之间的关系表达的范围和主体范围。的变化范围是一个孩子propagated父和反之亦然。认为作为一个组合的"与(&；。视频点播是这里：＝http：／／／／angularjs株egghead.io教训范围双向绑定

这里是一个教程，终于和表演在所有三种单视图：http：／／／／egghead.io教训angularjs株审查范围

相关讨论

我想从JavaScript原型继承的角度来解释这些概念。希望有助于理解。

定义指令范围有三个选项：

  • scope: false：角度默认。指令的作用域正好是它的父作用域之一(parentScope)。
  • scope: true：角度为该指令创建了一个范围。作用域原型继承自parentScope。
  • scope: {...}：隔离范围解释如下。

    • 指定scope: {...}定义isolatedScope。isolatedScope不继承parentScope的财产，尽管isolatedScope.$parent === parentScope不继承。其定义如下：

    1
    2
    3
    4
    5
    6
    7
    app.directive("myDirective", function() {
        return {
            scope: {
                ... // defining scope means that 'no inheritance from parent'.
            },
        }
    })

    isolatedScope不能直接访问parentScope。但有时指令需要与parentScope通信。他们通过@、=和&进行交流。关于使用符号@、=和&的主题是关于使用isolatedScope的场景。

    它通常用于不同页面共享的一些常见组件，如模态。一个独立的范围可以防止污染全球范围，并且很容易在页面之间共享。

    下面是一个基本指令：http://jsfidle.net/7t984sf9/5/。要说明的图像是：

    enter image description here

    @单向绑定

    @简单地把财产从parentScope移交给isolatedScope。它被称为one-way binding，这意味着您不能修改parentScope属性的值。如果您熟悉JavaScript继承，则可以轻松理解这两个场景：

    • 如果绑定属性是原始类型，如示例中的interpolatedProp：您可以修改interpolatedProp，但parentProp1不会被更改。但是，如果更改EDOCX1的值(28)，EDOCX1的值(26)将被新值覆盖(角度为$digest)。

    • 如果绑定属性是某个对象，如parentObj：由于传递给isolatedScope的对象是引用，修改该值将触发此错误：

      TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}

    =双向绑定

    =称为two-way binding，这意味着childScope中的任何修改也将更新parentScope中的值，反之亦然。此规则适用于基本体和对象。如果将parentObj的绑定类型改为=的绑定类型，则可以修改parentObj.x的值。一个典型的例子是ngModel。

    &：函数绑定

    &允许指令调用一些parentScope函数，并从指令中传入一些值。例如，检查指令范围中的jsFiddle:&；。

    在指令中定义可单击的模板，如：

    1
     

    使用如下指令：

    1
     

    变量valueFromDirective通过{valueFromDirective: ...从指令传递给父控制器。

    参考：了解范围

    相关讨论

    不是我的小提琴，但jsfiddle.net http：/ / / / / maxisam qrcxh显示差分。关键件是：

    1
    2
    3
    4
    5
    6
    7
    8
               scope:{
                /* NOTE: Normally I would set my attributes and bindings
                to be the same name but I wanted to delineate between
                parent and isolated scope. */                    
                isolatedAttributeFoo:'@attributeFoo',
                isolatedBindingFoo:'=bindingFoo',
                isolatedExpressionFoo:'&'
            }

    @：单向绑定

    =：双向绑定

    &；：函数绑定

    相关讨论

    AngularJS–独立范围–@vs=vs&；

    下面的链接提供了带解释的简短示例：

    http://www.codeforeach.com/angularjs/angularjs-isolate-scopes-vs-vs

    @–单向绑定

    指令：

    1
    scope : { nameValue :"@name" }

    鉴于：

    1
    <my-widget name="{{nameFromParentScope}}"></my-widget>

    =–双向绑定

    指令：

    1
    2
    3
    4
    scope : { nameValue :"=name" },
    link : function(scope) {
      scope.name ="Changing the value here will get reflected in parent scope value";
    }

    鉴于：

    1
    <my-widget name="{{nameFromParentScope}}"></my-widget>

    &；–函数调用

    指令：

    1
    2
    3
    4
    scope : { nameChange :"&" }
    link : function(scope) {
      scope.nameChange({newName:"NameFromIsolaltedScope"});
    }

    鉴于：

    1
    <my-widget nameChange="onNameChange(newName)"></my-widget>

    我花了很长时间才真正明白这一点。对我来说，关键是理解"@"是指那些您希望就地计算并作为常量传递到指令中的内容，其中"="实际上传递对象本身。

    在http://blog.ramses.io/technical/angularjs上有一篇很好的博客文章解释了这一点：当使用隔离作用域声明指令时，-@-&；-和-=-之间的区别

    相关讨论