Angular中scope作用域如何使用

今天就跟大家聊聊有關(guān)Angular中scope作用域如何使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

Scope 是一個(gè)對(duì)象，有可用的方法和屬性。

Scope 可應(yīng)用在視圖和控制器上。

$rootScope

每個(gè)AngularJs應(yīng)用默認(rèn)有一個(gè)根作用域--$rootScope， 根作用域位于最頂層，作為其他作用域的父作用域，可作用于整個(gè)應(yīng)用中。

$scope

scope(作用域)對(duì)應(yīng)MVC模式的Model，是應(yīng)用在HTML(視圖)和JavaScript(控制器)之間的紐帶，可應(yīng)用在視圖和控制器上。

scope是表達(dá)式執(zhí)行的上下文，同時(shí)作用域也是一個(gè)對(duì)象，有可用的方法和屬性。

一、變量的取值和賦值

<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){ 
}

效果：

界面上顯示了兩個(gè)1，但當(dāng)我們點(diǎn)擊按鈕之后，childCtrl作用域內(nèi)的數(shù)據(jù)改變了，parentCtrl作用域內(nèi)的數(shù)據(jù)沒(méi)有改變

分析：

①childCtrl作用域繼承了parentCtrl作用域(類(lèi)似于JavaScript的原型鏈繼承)，所以childCtrl作用域可以訪問(wèn)到parentCtrl的內(nèi)容。
②點(diǎn)擊按鈕后childCtrl作用域就會(huì)創(chuàng)建一個(gè)number基礎(chǔ)類(lèi)型變量，當(dāng)childCtrl已有某個(gè)基礎(chǔ)類(lèi)型變量就不會(huì)訪問(wèn)原型鏈。

解決：

①可以使用$parent來(lái)指定上級(jí)作用域改變

 <div ng-controller="parentCtrl">
  <span>{{number}}</span>
  <div ng-controller="childCtrl">
   <span>{{number}}</span>
   <button ng-click="$parent.number = number +1">增加</button>
  </div>
 </div>

②使用引用類(lèi)型變量，內(nèi)外層作用域均是data對(duì)象的引用，修改對(duì)象的屬性，引用的還是同一個(gè)變量。

 <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等指令也會(huì)產(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的時(shí)候,我們創(chuàng)建的指令和父作用域（其實(shí)是同一個(gè)作用域）共享同一個(gè)model模型，所以在指令中修改模型數(shù)據(jù)，它會(huì)反映到父作用域的模型中。

②scope：true

當(dāng)scope設(shè)置為true的時(shí)候，我們就新創(chuàng)建了一個(gè)作用域，只不過(guò)這個(gè)作用域是繼承的父作用域；可以這樣理解，我們新創(chuàng)建的作用域是一個(gè)新的作用域，只不過(guò)在初始化的時(shí)候，用了父作用域的屬性和方法去填充我們這個(gè)新的作用域。它和父作用域不是同一個(gè)作用域。

③scope：{}

@ 這是一個(gè)單項(xiàng)綁定的前綴標(biāo)識(shí)符

<div my-directive my-name="{{name}}"></div>

屬性的名字要用-將兩個(gè)單詞連接，因?yàn)槭菙?shù)據(jù)的單項(xiàng)綁定所以要通過(guò)使用{{}}來(lái)綁定數(shù)據(jù)。

= 這是一個(gè)雙向數(shù)據(jù)綁定前綴標(biāo)識(shí)符

<div my-directive age="age"></div>

數(shù)據(jù)的雙向綁定要通過(guò)=前綴標(biāo)識(shí)符實(shí)現(xiàn)，所以不可以使用{{}}。

& 這是一個(gè)綁定函數(shù)方法的前綴標(biāo)識(shí)符

<div my-directive change-my-age="changeAge()"></div>

屬性的名字要用-將多個(gè)個(gè)單詞連接。

看完上述內(nèi)容，你們對(duì)Angular中scope作用域如何使用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。