點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

Angular 作用域scope的具體使用

來源：懂視網責編：小采時間：2020-11-27 22:23:56

Angular 作用域scope的具體使用

Angular 作用域scope的具體使用:Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。 Scope 是一個對象，有可用的方法和屬性。 Scope 可應用在視圖和控制器上。 $rootScope 每個AngularJs應用默認有一個根作用域--$rootScope，根作用域位于最頂層，作

推薦度：

點擊下載本文 文檔為doc格式

導讀Angular 作用域scope的具體使用:Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。 Scope 是一個對象，有可用的方法和屬性。 Scope 可應用在視圖和控制器上。 $rootScope 每個AngularJs應用默認有一個根作用域--$rootScope，根作用域位于最頂層，作

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

Scope 是一個對象，有可用的方法和屬性。

Scope 可應用在視圖和控制器上。

$rootScope

每個AngularJs應用默認有一個根作用域--$rootScope，根作用域位于最頂層，作為其他作用域的父作用域，可作用于整個應用中。

$scope

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

scope是表達式執行的上下文，同時作用域也是一個對象，有可用的方法和屬性。

一、變量的取值和賦值

<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，但當我們點擊按鈕之后，childCtrl作用域內的數據改變了，parentCtrl作用域內的數據沒有改變

分析：

①childCtrl作用域繼承了parentCtrl作用域(類似于JavaScript的原型鏈繼承)，所以childCtrl作用域可以訪問到parentCtrl的內容。
②點擊按鈕后childCtrl作用域就會創建一個number基礎類型變量，當childCtrl已有某個基礎類型變量就不會訪問原型鏈。

解決：

①可以使用$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>

②使用引用類型變量，內外層作用域均是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等指令也會產生新作用域

二、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

當scope設置為false的時候,我們創建的指令和父作用域（其實是同一個作用域）共享同一個model模型，所以在指令中修改模型數據，它會反映到父作用域的模型中。

②scope：true

當scope設置為true的時候，我們就新創建了一個作用域，只不過這個作用域是繼承的父作用域；可以這樣理解，我們新創建的作用域是一個新的作用域，只不過在初始化的時候，用了父作用域的屬性和方法去填充我們這個新的作用域。它和父作用域不是同一個作用域。

③scope：{}

@ 這是一個單項綁定的前綴標識符

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

屬性的名字要用-將兩個單詞連接，因為是數據的單項綁定所以要通過使用{{}}來綁定數據。

= 這是一個雙向數據綁定前綴標識符

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

數據的雙向綁定要通過=前綴標識符實現，所以不可以使用{{}}。

& 這是一個綁定函數方法的前綴標識符

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Angular 作用域scope的具體使用

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用 scope 作用域

熱門焦點

Angular 作用域scope的具體使用

Angular 作用域scope的具體使用

Angular 作用域scope的具體使用

最新推薦

猜你喜歡

熱門推薦