概论：

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

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博客

AngularJS 中的Scope

概论：

原型继承机制：

AngularJS 作用域Scope的继承：

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

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

Directives：

directive 与 controller 数据传递和通信

总结：

最新文章

ITPub博客

AngularJS 中的Scope

概论：

原型继承机制：

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

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

Directives：

directive 与 controller 数据传递和通信

总结：

最新文章

AngularJS 作用域Scope的继承：

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