＆vs @ and = in angularJS有什么区别

Question

我对AngularJS很新。有没有人可以用适当的例子来解释这些差异（&，@和=）。

Answer 1

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

&允许指令的隔离范围将值传递到父级作用域以在属性中定义的表达式中进行评估。请注意，指令属性隐含地是一个表达式，并且不使用双重大括号表达式语法。这一个更难以在文本中解释。 Screencast on & is here：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

不是我的小提琴，但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 3

我想从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的方案。

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

以下是基本指令：http://jsfiddle.net/7t984sf9/5/。以示出的图像是：

@：单向结合

@只是简单地传递从parentScope到isolatedScope财产。它被称为one-way binding，这意味着您不能修改parentScope属性的值。如果你熟悉JavaScript继承，你可以很容易地理解这两个场景：

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

• 如果绑定属性是一些对象，像parentObj：自所述一个传递到isolatedScope是一个参考，修改值将触发此错误：

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

=：双双向绑定

=被称为two-way binding，这意味着childScope中的任何修改也会更新va在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 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

@：单向结合

=：双向绑定

&：功能结合