『AngularJS』理解$Scope

理解$Scope

執行概要

在AngularJS，一個子scope一般原型繼承於它的父scope。應用於這個規則的表達式是一個使用scope:{...}的指令，這將建立一個『孤島』scope（非原型繼承）。這種構造一般在建立一個可複用組件指令的時候使用。

Scope繼承一般是垂直的，而且你一般不須要知道它的發生，直到你嘗試在子scope中使用2-way數據綁定到一個在父scope中定義的原始類型。scope不起做用的緣由，不少是因爲在它的父類中有同名的屬性。AngularJS不會這麼作，這是由JavaScript原型繼承本身作的。新的AngularJS開發者常常不瞭解的是，ng-repeat、ng-switch、ng-view、ng-include都會建立一個新的子scope，因此問題常常在這些指令中出現。

在你的model中，帶有「.」將會確認原型繼承在起做用。因此使用<input type="text" ng-model="someObj.prop1">比<input type="text" ng-model="prop1">更好。

若是你真的想要（或須要）使用一個原始的方式，有兩項工做：

• 在子scope中，使用$parent.parentScopeProperty。這將阻止子scope建立它本身的屬性。
• 在父scope上建立一個方法，而且從子scope中調用它，傳遞原始值到父scope中（並不老是起做用）。

相關細節

• JavaScript Prototypal Inheritance
• Angular Scope Inheritance
  • ng-include
  • ng-switch
  • ng-repeat
  • ng-view
  • ng-controller
  • directives