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-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-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-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-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  - 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 .
• < or  – 建立了一个单路one-way(one-directional，单方向)的绑定，在一个本地的scope的property和一个通过attribute的attr传递过来的表达式。这个表达式是在父scope中的环境中被评估。如果没有attr 名字被指定，那么这个attribute的名字被假设是跟本地名字是一致的。你可以通过增加?:  or  来绑定可选的。

For example, given  my-attr="parentModel"> anddirective definition of scope: { localModel:' }, 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-attr="parentModel"> 和指令定义 scope: { localModel:' }，然后这个隔离的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-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-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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！