AngularJS學習：directive的scope

參考：https://docs.angularjs.org/api/ng/service/$compile#-scope-。

scope

The scopeproperty can be false, true, or an object:

• false (default): No scope will be created for the directive. The directive will use its parent's scope.
• false（默認）：不會爲指令建立新的scope。指令將是用它父親的scope。
• true: A new child scope that prototypically inherits from its parent will be created for the directive's element. If multiple directives on the same element request a new scope, only one new scope is created.
• true：爲了指令的元素，一個新的子的scope，原型化繼承了它父親的，將會被建立。若是在相同的元素上有多個指令須要一個新的scope，只會有一個新的scope被建立。
• {...} (an object hash): A new "isolate" scope is created for the directive's template. The 'isolate' scope differs from normal scope in that it does not prototypically inherit from its parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope. Note that an isolate scope directive without a template or templateUrl will not apply the isolate scope to its children elements.
• {…}（一個對象hash）：一個新的「isolate」的scope被建立—爲指令的模板。這個「isolate」scope不一樣於普通的scope，它不原型化繼承它父親的scope。這一點對於當建立一個可重用的組件頗有用，。注意，一個隔離的scope的指令沒有伴隨着一個template或者templateUrl，將不會應用這個隔離的scope給它的孩子元素。

The 'isolate' scope object hash defines a set of local scope propertiesderived from attributes on the directive's element. These local properties areuseful for aliasing values for templates. The keys in the object hash map tothe name of the property on the isolate scope; the values define how theproperty is bound to the parent scope, via matching attributes on thedirective's element:

這個「isolate」scope對象hash定義了一個本地scope屬性（properties）的集合，派生自指令元素的屬性（attributes）。這些本地的properties對於給template分配別名頗有用。這個對象hashmap鍵值針對property的名字，在隔離的scope上，而名字定義了這個property是如何被綁定到父scope上的，經過匹配指令元素的attributes。

• @ or @attr - bind a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are strings. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given <my-component my-attr="hello {{name}}"> and the isolate scope definition scope: { localName:'@myAttr' }, the directive's scope property localName will reflect the interpolated value of hello {{name}}. As the name attribute changes so will the localName property on the directive's scope. The name is read from the parent scope (not the directive's scope).
• @ or @attr  - 綁定一個本地的scope property到DOM attribute的值上。這個結果一般是一個字符串，由於DOM的attribute是字符串。若是沒有attr被指定，那麼這個attribute的名字是被假設爲和本地的屬性名字是同樣的。好比 <my-component my-attr="hello {{name}}"> 和隔離的scope定義： scope: { localName:'@myAttr' }，這個指令的scope的屬性localName將會影響這個 hello {{name}}的插入值。當這個name attribute變化，那麼localName property也會跟着變化。這個name是從父scope中讀到的（而不是指令的scope）。
• = or =attr - set up a bidirectional binding between a local scope property and an expression passed via the attribute attr. The expression is evaluated in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given <my-component my-attr="parentModel"> and the isolate scope definition scope: { localModel: '=myAttr' }, the property localModel on the directive's scope will reflect the value of parentModel on the parent scope. Changes to parentModel will be reflected in localModel and vice versa. Optional attributes should be marked as such with a question mark: =? or =?attr. If the binding expression is non-assignable, or if the attribute isn't optional and doesn't exist, an exception ($compile:nonassign) will be thrown upon discovering changes to the local value, since it will be impossible to sync them back to the parent scope. By default, the $watch method is used for tracking changes, and the equality check is based on object identity. However, if an object literal or an array literal is passed as the binding expression, the equality check is done by value (using the angular.equals function). It's also possible to watch the evaluated value shallowly with $watchCollection: use =* or =*attr (=*? or =*?attr if the attribute is optional).
• = or =attr – 創建一個雙向的綁定，在本地的scope property和一個經過attribute 的attr傳遞過來的表達式之間。表達式在父的scope中被評估計算出來。若是沒有attr 被指定，那麼attribute的名字將被假設爲和本地的名字是同樣的。

參考 <my-component my-attr="parentModel"> 和隔離的scope定義：scope: { localModel: '=myAttr' },這個在指令的scope的property localModel  將會影響父scope的parentModel的值。對於parentModel的修改將會影響localModel，反之亦然。可選的attributes 將會被標記成相似問號： =? or =?attr。若是一個綁定的表達式是沒有分配的，或者若是一個attribute不是可選的，而且不存在，一個異常($compile:nonassign)將會被拋出--在發現本地值變化的過程當中，由於這將不可能去同步這些回父scope中去。默認的，這個$watch方法被用於跟蹤變化，而且檢查相等性，基於對象相等的原則。然而，若是一個對象或者一個數組字面上被傳遞給一個綁定表達式，這個相等判斷就經過值完成（using the angular.equals function）。這樣一樣有可能較淺地用 $watchCollection觀察被評估的值：use =* or =*attr (=*? or =*?attr if theattribute is optional)。

• < or <attr - set up a one-way (one-directional) binding between a local scope property and an expression passed via the attribute attr. The expression is evaluated in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. You can also make the binding optional by adding ?: <? or <?attr.
• < or <attr – 創建了一個單路one-way(one-directional，單方向)的綁定，在一個本地的scope的property和一個經過attribute的attr傳遞過來的表達式。這個表達式是在父scope中的環境中被評估。若是沒有attr 名字被指定，那麼這個attribute的名字被假設是跟本地名字是一致的。你能夠經過增長?: <? or <?attr 來綁定可選的。

For example, given <my-component my-attr="parentModel"> anddirective definition of scope: { localModel:'<myAttr' }, then theisolated scope property localModel willreflect the value of parentModel on theparent scope. Any changes to parentModelwill bereflected in localModel, but changes in localModel will not reflect in parentModel. There arehowever two caveats:

舉個例子，給定<my-component my-attr="parentModel"> 和指令定義 scope: { localModel:'<myAttr' }，而後這個隔離的scope的 property localModel 將會影響在父scope的parentModel 的值。任何對於parentModel的變化都會影響localModel，可是對於localModel的變化將不會影響parentModel。這裏有兩個警告：

1. one-way binding does not copy the value from the parent to the isolate scope, it simply sets the same value. That means if your bound value is an object, changes to its properties in the isolated scope will be reflected in the parent scope (because both reference the same object).

單路綁定不從父scope到隔離的scope拷貝值。這意味着若是你的綁定的值是一個對象，對它的properties的改變—在隔離的scope中—將會被反射體如今父scope中（由於兩個指向的是同一個對象）。

2. one-way binding watches changes to the identity of the parent value. That means the $watch on the parent value only fires if the reference to the value has changed. In most cases, this should not be of concern, but can be important to know if you one-way bind to an object, and then replace that object in the isolated scope. If you now change a property of the object in your parent scope, the change will not be propagated to the isolated scope, because the identity of the object on the parent scope has not changed. Instead you must assign a new object.

單路綁定監控對於父scope值的相等性變化。這意味着這個在父值上的$watch只會在對於值的引用發生變化時被觸發。在多數時候，這個不須要被關心，可是要知道若是單路綁定到一個對象，而後在隔離的scope中替代那個對象。若是你如今改變你父scope中那個對象的property，這個變化將不會傳播到隔離的scope中過去，由於在父scope中的對象的相等性已經發生改變了。取而代之的，你必須分配一個新的對象。

One-way binding is useful if you do not plan to propagate changes to yourisolated scope bindings back to the parent. However, it does not make thiscompletely impossible.

單路綁定是有用的--若是你並不計劃去傳播對你的隔離的scope中的綁定的變化到父scope中去。而後，這並非徹底不可能。

• & or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given <my-component my-attr="count = count + value"> and the isolate scope definition scope: { localFn:'&myAttr' }, the isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression to the parent scope. This can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

& or &attr –提供一個方法去執行一個在父scope的範圍內執行一個表達式。若是沒有attr 的名字被指定，那麼attribute的名字被假設和本地的名字一致。給定

<my-component my-attr="count = count + value"> 和隔離的scope定義： scope: { localFn:'&myAttr' }，這個隔離的scope的propertylocalFn 將會指向一個函數，包裹了count = count + value表達式。一般這對於經過一個表達式，從隔離的scope到父scope傳遞數據是有幫助的。這些能夠經過傳遞一個本地變量的名和值的map到一個表達式包裹fn來完成。例如，若是表達式是 increment(amount)，而後咱們能夠指定總和的值，經過調用 localFn as localFn({amount: 22})。

In general it's possible to apply more than one directive to one element,but there might be limitations depending on the type of scope required by thedirectives. The following points will help explain these limitations. Forsimplicity only two directives are taken into account, but it is alsoapplicable for several directives:

一般，應用多於一個指令到一個元素是可能的，可是這裏會有一些限制，依賴於指令所須要的scope的類型。下面會幫助解釋這些顯示。爲了簡單，只考慮兩個指令的狀況，可是，更多的指令也可適用。

• no scope + no scope => Two directives which don't require their own scope will use their parent's scope

no scope + noscope =>兩個指令都不須要本身的scope，將會使用父親的scope。

• child scope + no scope => Both directives will share one single child scope

child scope + noscope =>兩個指令將會共享一個孩子scope。

• child scope + child scope => Both directives will share one single child scope

child scope + childscope =>兩個指令將會共享一個孩子scope。

• isolated scope + no scope => The isolated directive will use it's own created isolated scope. The other directive will use its parent's scope

isolated scope + noscope =>隔離的指令將會使用它本身建立的隔離的scope。另一個指令將會使用父親的scope。

• isolated scope + child scope => Won't work! Only one scope can be related to one element. Therefore these directives cannot be applied to the same element.

isolated scope + childscope => Won't work!只能有一個scope被關聯到一個元素上。所以，這些指令將不會被應用到相同的元素上。

• isolated scope + isolated scope => Won't work! Only one scope can be related to one element. Therefore these directives cannot be applied to the same element.

isolated scope + isolatedscope => Won't work! 只能有一個scope被關聯到一個元素上。所以，這些指令將不會被應用到相同的元素上。

關於@和&的區別，stackoverflow有一個問題解釋得很好：http://stackoverflow.com/questions/14908133/what-is-the-difference-between-vs-and-in-angularjs，摘抄在下面：

 

@ allowsa value defined on the directive attribute to be passed to the directive'sisolate scope. The value could be a simple string value (myattr="hello")or it could be an AngularJS interpolated string with embedded expressions (myattr="my_{{helloText}}").You can think of it as "one-way" communication from the parent scopeinto the child directive. John Lindquist has a series of short screencastsexplaining each of these. Screencast on @ is here: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

& allowsthe directive's isolate scope to pass values into the parent scope forevaluation in the expression defined in the attribute. Note that the directiveattribute is implicitly an expression and does not use double curly braceexpression syntax. This one is tougher to explain in text. Screencast on & ishere: https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

= setsup a two-way binding expression between the directive's isolate scope and theparent scope. Changes in the child scope and propagated to the parent andvice-versa. Think of = as a combination of @ and &. Screencast on = ishere: https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

And finally here is a screencast that shows all three usedtogether in a single view: https://egghead.io/lessons/angularjs-isolate-scope-review