$rootScope
每個AngularJs應(yīng)用默認(rèn)有一個根作用域--$rootScope， 根作用域位于最頂層世曾，作為其他作用域的父作用域轮听，可作用于整個應(yīng)用中。
$scope
scope(作用域)對應(yīng)MVC模式的Model血巍，是應(yīng)用在HTML(視圖)和JavaScript(控制器)之間的紐帶述寡，可應(yīng)用在視圖和控制器上。scope是表達(dá)式執(zhí)行的上下文禀崖，同時作用域也是一個對象螟炫，有可用的方法和屬性。
一掸屡、變量的取值和賦值
<div ng-controller="parentCtrl">
<span>{{number}}</span>
<div ng-controller="childCtrl">
<span>{{number}}</span>
<button ng-click="number = number +1">增加</button>
</div>
</div>
function parentCtrl($scope){
$scope.number = 1;
}
function childCtrl($scope){
}
效果：
- 界面上顯示了兩個
1仅财，但當(dāng)我們點擊按鈕之后满着，childCtrl作用域內(nèi)的數(shù)據(jù)改變了，parentCtrl作用域內(nèi)的數(shù)據(jù)沒有改變
分析：
- ①
childCtrl作用域繼承了parentCtrl作用域(類似于JavaScript的原型鏈繼承)，所以childCtrl作用域可以訪問到parentCtrl的內(nèi)容缕探。 - ②點擊按鈕后
childCtrl作用域就會創(chuàng)建一個number基礎(chǔ)類型變量还蹲，當(dāng)childCtrl已有某個基礎(chǔ)類型變量就不會訪問原型鏈。
解決：
-
①可以使用
$parent來指定上級作用域改變<div ng-controller="parentCtrl"> <span>{{number}}</span> <div ng-controller="childCtrl"> <span>{{number}}</span> <button ng-click="$parent.number = number +1">增加</button> </div> </div> -
②使用引用類型變量潭兽，內(nèi)外層作用域均是
data對象的引用山卦，修改對象的屬性诵次，引用的還是同一個變量枚碗。<div ng-controller="parentCtrl"> <span>{{data.number}}</span> <div ng-controller="childCtrl"> <span>{{data.number}}</span> <button ng-click="data.number = data.number +1">增加</button> </div> </div> function parentCtrl($scope){ $scope.data.number = 123'; } function childCtrl($scope){ }
ng-if肮雨、ng-repeat箱玷、ng-switch、ng-include等指令也會產(chǎn)生新作用域
二波丰、Directive中的作用域
.directive("myDirective", function () {
return {
restrict: "AE",
scope: {
name: '@myName',
age: '=',
changeAge: '&changeMyAge'
},
replace: true,
template: "<div class='my-directive'>" +
"我的名字是：<span ng-bind='name'></span><br/>" +
"我的年齡是：<span ng-bind='age'></span><br/>" +
"在這里修改名字：<input type='text' ng-model='name'><br/>" +
"<button ng-click='changeAge()'>修改年齡</button>" +
" </div>"
}
①scope：false
當(dāng)
scope設(shè)置為false的時候,我們創(chuàng)建的指令和父作用域（其實是同一個作用域）共享同一個model模型呀舔，所以在指令中修改模型數(shù)據(jù)扩灯，它會反映到父作用域的模型中。
②scope：true
當(dāng)
scope設(shè)置為true的時候惧磺，我們就新創(chuàng)建了一個作用域磨隘，只不過這個作用域是繼承的父作用域顾患；可以這樣理解，我們新創(chuàng)建的作用域是一個新的作用域设预，只不過在初始化的時候鳖枕，用了父作用域的屬性和方法去填充我們這個新的作用域桨螺。它和父作用域不是同一個作用域。
③scope：{}
@ 這是一個單項綁定的前綴標(biāo)識符
<div my-directive my-name="{{name}}"></div>
<font color=red>屬性的名字要用-將兩個單詞連接魏烫，因為是數(shù)據(jù)的單項綁定所以要通過使用{{}}來綁定數(shù)據(jù)则奥。</font>
= 這是一個雙向數(shù)據(jù)綁定前綴標(biāo)識符
<div my-directive age="age"></div>
<font color=red>數(shù)據(jù)的雙向綁定要通過=前綴標(biāo)識符實現(xiàn)读处，所以不可以使用{{}}。</font>
& 這是一個綁定函數(shù)方法的前綴標(biāo)識符
<div my-directive change-my-age="changeAge()"></div>
<font color=red>屬性的名字要用-將多個個單詞連接井辜。</font>
