首頁  >  文章  >  web前端  >  在Angular作用域中scope的如何使用

在Angular作用域中scope的如何使用

亚连
亚连原創
2018-06-21 14:37:121997瀏覽

本篇文章主要介紹了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&#39;;
 }
 function childCtrl($scope){
  
 }

ng-if、ng-repeat、ng-switch、ng-include等指令也會產生新作用域

二、Directive中的作用域

.directive("myDirective", function () {
return {
 restrict: "AE",
 scope: {
  name: &#39;@myName&#39;,
  age: &#39;=&#39;,
  changeAge: &#39;&changeMyAge&#39;
 },
 replace: true,
 template: "<p class=&#39;my-directive&#39;>" +
  "我的名字是:<span ng-bind=&#39;name&#39;></span><br/>" +
  "我的年龄是:<span ng-bind=&#39;age&#39;></span><br/>" +
  "在这里修改名字:<input type=&#39;text&#39; ng-model=&#39;name&#39;><br/>" +
  "<button ng-click=&#39;changeAge()&#39;>修改年龄</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>

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

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

使用react如何實作選單權限控制

#詳細解讀vue.js中props如何傳遞參數

在input如何實作動態模糊查詢

#

以上是在Angular作用域中scope的如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn