1. 程式人生 > >AngularJs 隔離作用域

AngularJs 隔離作用域

logs 創建 初始化 con 操作 定義 .cn 自定義指令 ont

初學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會為子級(所在當前)作用域傳遞關鍵字參數。

AngularJs 隔離作用域