AngularJS 文档阅读之指令 scope

scope

指令，是AngularJS最经常使用的功能，让咱们很容易在前台实现代码复用。而指令最精髓的地方，就在于指令内外域scope的交互方式。

本文属于一篇对文档的翻译加上一些本身对此的理解，因水平有限，可能某些地方翻译的不通顺，或者翻译的错了，欢迎你们批评指正。本文对scope的用法以及描述均翻译自AngularJS英文文档，文档地址：AngularJS 官方文档

scope属性的值能够是false，能够是true，也能够是对象。

false

false：这是指令scope的默认属性，不会为指令建立一个scope，这个指令会使用他的父scope。

true

true：为指令建立一个从父scope原型继承的子scope。

对象

{key: value}：为指令建立一个新的隔离scope，隔离scope和一般的scope的区别在于：隔离scope不从父scope作原型继承。

不从父scope作原型继承，这对于建立可重用的组件很是有用，可重用组件不该该从父scope读取或修改属性。

注意：一个有隔离scope可是没有template或templateUrl的指令不会将隔离scope应用到它的子元素。这是文档上写的，目前尚未理解到到底是什么意思。

也多是我翻译的不对，如下是原文：

Note that an isolate scope directive without a template or templateUrl will not apply the isolate scope to its children elements.

隔离对象定义了源于指令元素的属性的本地scope属性集合。

scope绑定

如下几种绑定都是能够加参数的。

例：

scope: {
    name: '=nameAttr'
}

绑定的就是：<test name-attr="'hello'"></test>。

scope: {
    name: '='
}

绑定的就是：<test name="'hello'"></test>。

字符串绑定

@/@attr：绑定本地scope的属性到DOM属性的值，这个结果老是一个字符串，由于DOM属性就是字符串。随着DOM属性值的改变，指令scope上的属性也会改变，由于这个属性是在它的父scope上读取的。

双向绑定

=/=attr：本地scope的属性和传递到属性上的表达式创建双向绑定，该表达式是在父scope的范围内计算的。若是绑定的表达式不是可赋值的，或者它不是可选的可是指令中没有传，$compile:noassign异常就会被抛出，由于它没法和父scope同步。

默认地，$watch方法一般用来监听改变，而且根据对象的地址来进行相等判断。然而，若是一个对象地址或数组地址被传递到绑定的表达式中，比较的方法就是经过判断值是否相等。也可使用=*/=*attr和$watchCollection进行浅监听。

这段话还不是很理解，在StackOverflow找到了一个靠谱的回答，但还不是很明白。AngularJS =* 问题

单向绑定

</<attr：在本地scope和传递到DOM属性上的表达式之间创建单向绑定，全部在DOM属性上表达式的改变会反映到scope的属性上，可是scope属性上的改变不会反映到DOM属性的表达式上。

可是这有两个警告：

1.单向绑定不是将父scope的值拷贝到隔离scope上，而是简单的设置相同的值。若是你传的是一个对象，那在隔离scope上对该对象的改变会反映到父scope上，由于二者引用同一个对象。

2.单向绑定监视的是父值地址的改变。这意味着在父值上的$watch仅仅在引用的地址发生改变时才会生效。大多数状况下，这是不须要关心的。可是必需要知道若是你单向绑定了一个对象，而后会改变隔离scope上的对象，若是改变了父scope上的该对象的一个属性，这个改变是不会传递到隔离scope上的，由于这个对象的地址没有改变，除非你赋值一个新的对象。

若是不打算将隔离scope的改变传播会父节点，单向绑定是颇有用的。

绑定方法

&/&attr：在父scope提供一个可执行的表达式，就是传一个方法。

设置可选

全部的绑定(@, =, <, &)都能经过在表达式上添加?设置为可选的，这个标志必须在绑定模式以后，属性名称以前。

可选和不可选的区别在于：

• 绑定是可选的，这个属性不会被定义。
• 绑定不是可选的，这个属性被定义了。

如下是AngularJS文档中对可选指令的示例代码。

app.directive('testDir', function() {
  return {
    scope: {
      notoptional: '=',
      optional: '=?',
    },
    bindToController: true,
    controller: function() {
      this.$onInit = function() {
        console.log(this.hasOwnProperty('notoptional')); // true
        console.log(this.hasOwnProperty('optional')); // false
      }
    }
  };
});