AngularJS 中的Scope

概论：

        AngularJS中，子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法。但有一个例外：在directive中使用scope: { ... }，这种方式创建的作用域是一个独立的"Isolate"作用域，它也有父作用域，但父作用域不在其原型链上，不会对父作用域进行原型继承。这种方式定义作用域通常用于构造可复用的directive组件。

原型继承机制：

         在子作用域中使用  $parent.parentScopeProperty ，这样可以直接修改父作用域的属性。
           如果在子作用域中访问一个父作用域中定义的属性，JavaScript首先在子作用域中寻找该属性，没找到再从原型链上的父作用域中寻找，如果还没找到会再往上一级原型链的父作用域寻找。在AngularJS中，作用域原型链的顶端是$rootScope，JavaScript寻找到$rootScope为止。
            如果读取childScope.propertyX ，并且childScope 存在propertyX ，原型链不会被查询；
        如果写入childScope.propertyX , 原型链也不会被查询；
         如果写入childScope.propertyX.subPropertyY , 并且childScope 不存在propertyX ，原型链将被查询——查找propertyX 。

AngularJS 作用域Scope的继承：
       
         以下方式会创建新的子作用域，并且进行原型继承： ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用scope: true和transclude: true创建directive。

         以下方式会创建新的独立作用域，不会进行原型继承：用scope: { ... }创建directive。这样创建的作用域被称为"Isolate"作用域。

         注意：默认情况下创建directive使用了scope: false，不会创建子作用域。

Directives：

        默认directive（Scope：false）使用原有作用域，不存在原型继承(容易出问题)。
        Scope：true时，directive创建一个子作用域, 并且会从父作用域进行原型继承。 如果同一个DOM element存在多个directives要求创建子作用域，那么只有一个子作用域被创建，directives共用该子作用域。
        Scope{......}- directive创建一个独立的“Isolate”作用域，没有原型继承。这是创建可复用directive组件的最佳选择。因为它不会直接访问/修改父作用域的属性，不会产生意外的副作用。这种directive与父作用域进行数据通信有如下四种方式：

1. 1.= or =attr ：“Isolate”作用域的属性与父作用域的属性进行双向绑定，任何一方的修改均影响到对方，这是最常用的方式；

1. 2.@ or @attr ：“Isolate”作用域的属性与父作用域的属性进行单向绑定，即“Isolate”作用域只能读取父作用域的值，并且该值永远的String类型；

        3.& or &attr ：“Isolate”作用域把父作用域的属性包装成一个函数，从而以函数的方式读写父作用域的属性，包装方法是$parse。

directive 与 controller 数据传递和通信

        1、父controller监听全局scope(父scope)变量, 并广播事件给子scope(directive scope,每个directvie都有自己独立的scope作用域)

         2、directive 定义本地scope,通过=、@、&(方法)字符显示引用全局scope

         3、directive scope(子scope)通过parent[$scope.$parent.xxx]引用全局scope的属性

         4、directive监听全局scope变量变化,可以通过$scope.$parent.$watch方法

总结：

        1. 普通的带原型继承的作用域 -- ng-include , ng-switch , ng-controller , directive with scope: true ；
        2. 普通的带原型继承的，并且有赋值行为的作用域 -- ng-repeat ， ng-reapeat 为每一个迭代项创建一个普通的有原型继承的子作用域，但同时在子作用域中创建新属性存储迭代项；
        3."Isolate”作用域 -- directive with scope: {...}， 该作用域没有原型继承，但可以通过'=', '@', 和 '&'与父作用域通信。
        4." transcluded”作用域 -- directive with transclude: true ，它也是普通的带原型继承的作用域，但它与“Isolate”作用域是相邻友好的。

            

    

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/30319453/viewspace-1721568/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/30319453/viewspace-1721568/