＆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

@：單向結合

=：雙向綁定

&：功能結合