在angularJS中，＆vs @和=有什么区别？

我对AngularJS非常新颖。 有没有人可以用适当的例子来解释这些（＆，@和=）之间的区别。

Answer 1

@允许在指令属性上定义的值传递给指令的隔离范围。 该值可以是一个简单的string值（ myattr="hello" ），也可以是带embedded式expression式的AngularJS插入string（ myattr="my_{{helloText}}" ）。 把它看作是从父范围到子指令的“单向”通信。 约翰·林德奎斯特（John Lindquist）有一系列简短的video短片来解释每一个。 @上的截屏video位于： https ： //egghead.io/lessons/angularjs-isolate-scope-attribute-binding

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

=在指令的隔离范围和父范围之间设置一个双向绑定expression式。 子范围的变化会传播给父代，反之亦然。 把=想象成@和＆的组合。 Screencast on =在这里： https : //egghead.io/lessons/angularjs-isolate-scope-two-way-binding

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

Answer 2

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

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

1. scope: false ：angular度默认。 该指令的作用域恰好是其父作用域（ parentScope ）的作用域parentScope 。
2. scope: true ：Angular为此指令创build一个范围。 范围原型从parentScopeinheritance。
3. scope: {...} ：隔离范围如下所述。

指定scope: {...}定义一个isolatedScope 。 isolatedScope不会从parentScopeinheritance属性，虽然是isolatedScope.$parent === parentScope 。 它通过以下定义：

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

isolatedScope不能直接访问parentScope 。 但是有时候这个指令需要和parentScope进行通信。 他们通过@ ， =和&通信。 关于使用符号@ ， =和&的主题正在讨论使用isolatedScope场景 。

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

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

@ ：单向绑定

@只是将属性从parentScope给isolatedScope 。 它被称为one-way binding ，这意味着你不能修改parentScope属性的值。 如果您熟悉JavaScriptinheritance，则可以轻松理解这两种情况：

• 如果绑定属性是基本types，如示例中的interpolatedProp ：您可以修改interpolatedProp ，但不会更改parentProp1 。 但是，如果您更改了parentProp1的值，则interpolatedProp将被新值覆盖（当angular度$摘要时）。

• 如果绑定属性是一些对象，如parentObj ：因为传递给isolatedScope是一个引用，修改该值将触发此错误：

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

= ：双向绑定

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

& ：function绑定

&允许指令调用一些parentScope函数并从指令中传入一些值。 例如，检查JSFiddle：＆in指令范围 。

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

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

并使用如下指令：

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

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

参考： 了解范围

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

我花了很长时间才真正掌握了这个。 对我来说，关键是理解“@”是你想要在现场进行评估的东西，并作为一个常量传递给指令，其中“=”实际上是通过对象本身。

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

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

@ ：单向绑定

= ：双向绑定

＆ ：function绑定