本篇文章主要介紹了Angular 作用域的具體使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
Scope 是一個對象，有可用的方法和屬性。
Scope 可套用在檢視和控制器上。
$rootScope
每個AngularJs應用預設有一個根作用域--$rootScope， 根作用域位於最頂層，作為其他作用域的父作用域，可作用於整個應用中。
$scope
scope(作用域)對應MVC模式的Model，是應用在HTML(檢視)和JavaScript(控制器)之間的紐帶，可應用在視圖和控制器上。
scope是表達式執行的上下文，同時作用域也是一個對象，有可用的方法和屬性。
一、變數的取值和賦值
<p ng-controller="parentCtrl">
<span>{{number}}</span>
<p ng-controller="childCtrl">
<span>{{number}}</span>
<button ng-click="number = number +1">增加</button>
</p>
</p>
function parentCtrl($scope){
$scope.number = 1;
}
function childCtrl($scope){
}#：
介面上顯示了兩個1，但當我們點選按鈕之後，childCtrl作用域內的資料改變了，parentCtrl作用域內的資料沒有改變
分析：
①childCtrl作用域繼承了parentCtrl作用域(類似JavaScript的原型鏈繼承)，所以childCtrl作用域可以存取到parentCtrl的內容。
②點選按鈕後childCtrl作用域就會建立一個number基礎型別變量，當childCtrl已有某個基礎型別變數就不會存取原型鏈。
解決：
①可以使用$parent來指定上級作用域改變
<p ng-controller="parentCtrl">
<span>{{number}}</span>
<p ng-controller="childCtrl">
<span>{{number}}</span>
<button ng-click="$parent.number = number +1">增加</button>
</p>
</p>②使用引用型別變量，內外作用域皆是data物件的引用，修改物件的屬性，引用的還是同一個變數。
<p ng-controller="parentCtrl">
<span>{{data.number}}</span>
<p ng-controller="childCtrl">
<span>{{data.number}}</span>
<button ng-click="data.number = data.number +1">增加</button>
</p>
</p>
function parentCtrl($scope){
$scope.data.number = 123';
}
function childCtrl($scope){
}ng-if、ng-repeat、ng-switch、ng-include等指令也會產生新作用域
二、Directive中的作用域
.directive("myDirective", function () {
return {
restrict: "AE",
scope: {
name: '@myName',
age: '=',
changeAge: '&changeMyAge'
},
replace: true,
template: "<p 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>" +
" </p>"
}①scope：false
當scope設定為false的時候,我們建立的指令和父作用域（其實是同一個作用域）共用同一個model模型，所以在指令中修改模型數據，它會反映到父作用域的模型中。
②scope：true
當scope設定為true的時候，我們就新創建了一個作用域，只不過這個作用域是繼承的父作用域；可以這樣理解，我們新創建的作用域是一個新的作用域，只不過在初始化的時候，用了父作用域的屬性和方法去填入我們這個新的作用域。它和父作用域不是同一個作用域。
③scope：{}
@ 這是一個單一項目綁定的前綴標識符
<p my-directive my-name="{{name}}"></p>屬性的名字要用-將兩個單字連接，因為是資料的單項綁定所以要透過使用{{}}來綁定資料。
= 這是一個雙向資料綁定前綴標識符
<p my-directive age="age"></p>
資料的雙向綁定要透過=前綴標識符實現，所以不可以使用{{}}。
& 這是一個綁定函數方法的前綴標識符
<p my-directive change-my-age="changeAge()"></p>
屬性的名字要用-將多個個單字連接。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
#以上是在Angular作用域中scope的如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
