AngularJs 隔离作用域

Posted 2020-09-29 白守敬

初学NG，有诸多的不解，今天看了一篇文章，原文地址：https://segmentfault.com/a/1190000002773689#articleHeader0 ，本文运行的代码也出处此。

里面讲到了自定义指令的scope参数的值有三种，true,false,{}。我按照例子将scope的值运行试验了一把，利用Chrome插件batarang分析了一波，谈谈自己的理解，有不到的地方望各位海涵。

 首先，隔离作用域与继承作用域（子作用域）是不同的，隔离作用域同当前DOM的作用域是完全隔离开的。NG中的$scope是Scope类的实例，是模板的域模型，每个Scope都对应着一个域模型，我这样理解也就是NG根据DOM树和其NG指令来驱动生成一个层级作用域（这也是一个树结构）。

　　一直很疑惑隔离作用域与继承作用域的关系？。directive()方法返回这样一个对象，用来定义和配置指令所需的方法和属性,来控制如何渲染html模板，隔离作用域对象（scope）作为其中的一个属性返回，这对象只在指令的方法中或者指令的模板字符串中使用。

　　当指令的scope属性为false:

　　

　　 由上图可知，当scope为false,AngularJs并不会该指令生成的DOM节点生成新的Angular子作用域（$scope）,而是与父作用域共享，因此在模板中引用的模型也就是MyController父作用域中（当前作用域）的模型。

　　当指令的scope属性为true:

　　当初始化后，AngularJs为该指令创建新的子级作用域，其父作用域为MyController所在的作用域，当前的作用域（新建的子级作用域）模型为空，因此模板引用name,age模型会在父作用域进行搜索（沿着原型链进行向上）。然而当在当前作用域进行赋值（写）操作的时候就会在当前作用域创建新的模型（变量）。在input组件中输入的时候，就是做了这样的工作，name="白守敬"，因此会在指令所在的当前作用域下会新增了name模型，而不是覆写了父作用域，类似于javascript的原型继承。

　　当指令的scope属性为{}:

　　

        AngularJs也会该指令创建新的子级作用域，与情形二的区别在于其所在的作用域保存一份对父级作用域某些模型的或者DOM属性值的副本，scope在其中就扮演着这样的角色，@ 是将本地作用域同 DOM 属性的值进行绑定，= 将本地作用域同父级作用域上的属性进行绑定。因此在当前作用域，input组件对name模型赋值操作相当于修改了当前作用域name模型的值，对name，age模型的修改不会影响到父级作用域。

　　总结一下，首先会AngularJs会为其指令创建新的子级作用域，隔离作用域大概是扮演着这样的角色，隔离作用域scope会为子级（所在当前）作用域传递关键字参数。