angularJS中& vs @和=有什么区别

Question

我对 AngularJS 很陌生。谁能解释一下这些 AngularJS 运算符之间的区别：&, @ and = 在用适当的例子隔离范围时。

Answer 1

@ 允许将指令属性上定义的值传递给指令的隔离范围。该值可以是一个简单的字符串值 (myattr="hello")，也可以是一个带有嵌入表达式的 AngularJS 插值字符串 (myattr="my_{{helloText}}")。将其视为从父范围到子指令的“单向”通信。 John Lindquist 有一系列简短的截屏视频来解释其中的每一个。 @ 的截屏在这里：https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

& 允许指令的隔离范围将值传递到父范围，以便在属性中定义的表达式中进行评估。请注意，指令属性是隐式表达式，不使用双花括号表达式语法。这在文字中更难解释。 & 的截屏在这里：https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

= 在指令的隔离范围和父范围之间设置双向绑定表达式。子范围中的更改会传播到父范围，反之亦然。将 = 视为 @ 和 & 的组合。 = 的截屏在这里：https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

最后是一个截屏视频，在一个视图中显示了所有三个一起使用：https://egghead.io/lessons/angularjs-isolate-scope-review

Answer 2

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

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

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

指定scope: {...} 定义isolatedScope。 isolatedScope 不继承 parentScope 的属性，尽管 isolatedScope.$parent === parentScope。它是通过以下方式定义的：

app.directive("myDirective", function() {
    return {
        scope: {
            ... // defining scope means that 'no inheritance from parent'.
        },
    }
})

isolatedScope 无法直接访问parentScope。但有时指令需要与parentScope 通信。他们通过@、= 和& 进行通信。 关于使用符号@、=和&的话题正在讨论使用isolatedScope的场景。

它通常用于不同页面共享的一些通用组件，例如Modal。隔离范围可防止污染全局范围，并且易于在页面之间共享。

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

@: 单向绑定

@ 只是将属性从parentScope 传递给isolatedScope。它被称为one-way binding，这意味着您不能修改parentScope 属性的值。如果您熟悉 JavaScript 继承，您可以轻松理解这两种场景：

• 如果绑定属性是原始类型，例如示例中的interpolatedProp：您可以修改interpolatedProp，但不会更改parentProp1。但是，如果您更改 parentProp1 的值，interpolatedProp 将被新值覆盖（当 angular $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: & in directive scope。

在指令中定义一个可点击的模板，如：

<div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})">

并使用如下指令：

<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>

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

参考：Understanding Scopes

Answer 3

不是我的小提琴，但 http://jsfiddle.net/maxisam/QrCXh/ 显示了差异。关键是：

           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:'&'
        }        

Answer 4

@：单向绑定

=：双向绑定

&：函数绑定

Answer 5

AngularJS – 独立作用域 – @ vs = vs &

---

带有解释的简短示例可在以下链接中找到：

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

@ - 单向绑定

在指令中：

scope : { nameValue : "@name" }

在视图中：

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

= – 双向绑定

在指令中：

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

在视图中：

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

& – 函数调用

在指令中：

scope : { nameChange : "&" }
link : function(scope) {
  scope.nameChange({newName:"NameFromIsolaltedScope"});
}

在视图中：

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

Answer 6

我花了很长时间才真正掌握了这一点。我的关键是要理解“@”用于您想要在原地评估并作为常量传递到指令中的东西，其中“=”实际上传递了对象本身。

有一篇很好的博客文章解释了这一点：http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes