AngularJs 隔離範圍

標籤：com   一個   實驗   ade   對象   script   images   範圍   輸入   

初學NG，有諸多的不解，今天看了一篇文章，原文地址：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 隔離範圍