2015-10-06 141 views
1

我試圖理解angularjs中的範圍。Angularjs中的範圍

在angularjs中註冊一個指令時說,如果我們不提供任何範圍作爲對象的屬性,那麼對象的範圍是什麼呢?

例如,考慮下面的代碼: -

app.directive("kid", function() { 
return { 
restrict: "E", 
template: '<input type="text" ng-model="chore"> {{chore}}' 
    }; 
}); 

現在說,如果我在我的HTML 2個元素: -

<kid></kid> 
    <kid></kid> 

那麼,如何做上述落得共享相同的範圍是什麼?我還無法找到令人信服的答案。

回答

1

你的問題是關於範圍繼承和隔離範圍。

如果你在指令對象上聲明範圍屬性,那麼指令有它自己的隔離範圍。

如果聲明對你的指令作用域屬性對象指令繼承了它在實例化的範圍的範圍。

因此,與您的孩子指令定義不聲明隔離範圍孩子指令在下面兩個代碼示例繼承它們在實例化控制器的範圍。

<div ng-controller="myCtrl"> 
    <kid></kid> 
    <kid></kid> 
</div> 
2

是的,因爲您沒有聲明指令的任何scope選項,它將共享相同的範圍。

這裏是Demo Plunkr

現在開門見山,什麼是範圍對象?

scope Angular中的對象沒有任何上下文信息,並且可用於html,也可用於提供雙向綁定。基本上範圍是綁定一些控制器。

當事情涉及到指令scope,如果你沒有提到內部指令scope財產,這意味着指令股,其中向元件已放置在控制的範圍。

爲了使它們視爲不同scope每個指令,你可以用一個孤立的範圍內創建一個指令,可以使用scope: {}一個指令中進行定義,當你定義一個scope: {}一個指令,會創建一個孤立的孩子該範圍不是使用$scope.$new(true)方法從原始範圍繼承的原型。

Plunkr孤立範圍

+0

好像你瞭解隔離範圍,有一個概念,但是你的英語餘地廣闊的誤解。也許更仔細地說一下這一點。 – hally9k

+0

@ hally9k現在看起來不錯..可以自由編輯答案.. –

+0

我確實開始編輯你的答案,但發現自己完全重寫它,所以我只是添加了我自己的答案。 – hally9k

0

範圍是指應用程序模型中的對象。它是表達式的執行上下文。範圍按層次結構排列,模仿應用程序的DOM結構。範圍可以觀察表達式並傳播事件。

範圍特性

  1. 作用域提供的API($表),以enter image description here觀察模型的突變。
  2. 作用域提供API($ apply),通過系統 將任何模型更改傳播到「Angular領域」 (控制器,服務,Angular事件處理程序)之外的視圖中。
  3. 作用域提供對其評估表達式的上下文。

例如{{username}}表達式是沒有意義的,除非它是針對定義username屬性的特定範圍進行評估的.Scope是應用程序控制器和視圖之間的粘合劑。

http://i.stack.imgur.com/eEkVF.png