指令中孩子與孤立範圍之間的區別

我試圖理解AngularJS指令中的範圍。從我收集有三種類型：指令中孩子與孤立範圍之間的區別

範圍從父控制器繼承
子範圍（scope: true）
隔離範圍（scope: {}）

我瞭解的第一個。第二個，「兒童範圍」被定義爲：從父控制器

和「分離範圍」 prototypically繼承

範圍被定義爲特定於指令

範圍而不是從父控制器

在通俗地說繼承，究竟我「孩子範圍」和「隔離範圍」之間的區別？ 它們各自的用例是什麼？

來源

2015-10-22 Tarun Dugar

對於範圍使用的類型，這裏是一些指導原則，我跟隨。這方面的知識也幹看角和第三方指令

的數量，使用父範圍，如果你只需要一些行爲添加到現有的DOM元素，ng-click，ng-show，ng-class是它很好的例子。這些指令不帶有自己的模板UI，而只是擴展了退出html元素的行爲。

使用scope:true或您的指令計劃在範圍上添加新屬性並且不想污染具有此類屬性的父範圍時的子範圍。很少有Angular指令這樣做，ng-repeat爲每個迭代元素創建一個子範圍，並在子範圍中公開一些屬性，如$index。我會建議什麼時候創建指令，至少創建這個。

使用scope:{}創建的隔離範圍由真實組件使用，其中指令的輸入通過範圍屬性顯式指定，並且不受父範圍直接影響。這有助於我們創建一個真正的自包含可重用指令。孤立的指令存在一些挑戰，例如兩個孤立的指令不能應用於相同的html元素，您需要注意。

關於範圍繼承的細微差別，您必須閱讀https://github.com/angular/angular.js/wiki/Understanding-Scopes沒有出路。

希望它有幫助。

來源

2015-10-22 14:14:22 Chandermani

最簡單的方式來看待孤立的範圍很可能會看同一指令

<div ng-controller="someController"> 
    <my-directive> 
     <input ng-model ="user.name"> 
     {{ user.name}} 
    </my-directive> 
    <my-directive> 
     <input ng-model ="user.name"> 
     {{ user.name}} 
    </my-directive> 
</div>

的2個實例沒有隔離範圍user.name將在父範圍。因此，在任何一個實例中更改輸入都會在另一個實例中更改它，因爲它們都引用相同的變量

當範圍被隔離時，每個實例將擁有它自己的值user.name，並且一個實例中的更改不會影響其他實例

來源

2015-10-22 13:31:13 charlietfl

好了，所以孤立的範圍時，我們不希望使用控制器的範圍。但是，兒童範圍呢？什麼時候使用以及「原型繼承」是什麼意思？ –

建議你谷歌的繼承條款。這是一個基本的JavaScript對象概念 – charlietfl

這一定會幫助你https://github.com/angular/angular.js/wiki/Understanding-Scopes – Chandermani

當範圍設置爲「真」，AngularJS將創建繼承父作用域的新範圍。

當範圍被設置爲「假」（或沒有被設置），控制器和指令都使用相同的範圍對象。

當範圍：{}，指令得到一個新的隔離範圍。

細節可以發現here。

來源

2015-10-22 13:32:23

指令中孩子與孤立範圍之間的區別

回答

相關問題