詳解angular中的作用域及繼承

更新時(shí)間：2017年05月31日 17:13:15 作者：北城以南

本篇文章主要介紹了詳解angular中的作用域及繼承，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在一些使用angular框架的大型項(xiàng)目中，似乎有很多個(gè)controller，而每個(gè)controller都有自己的$scope.

1、$rootscope

$rootScope頂級(jí)作用域，也叫根作用域，類似于window，window的屬性在任何子作用域都可以訪問(wèn)。$rootScope則是所有controller進(jìn)行數(shù)據(jù)溝通的中間域，即在$rootScope中的數(shù)據(jù)，在每個(gè)controller中都能通過(guò)$rootScope.xxx獲取到。

2、$scope

(1)作用

$scope 就在視圖和控制器之間建立了一個(gè)橋梁,基于作用域視圖在修改數(shù)據(jù)時(shí)會(huì)立刻更新 $scope,同樣的 $scope 發(fā)生改變時(shí)也會(huì)立刻重新渲染視圖.每個(gè)控制器controller對(duì)應(yīng)一個(gè)$scope，通過(guò)為其屬性賦值,可以傳遞數(shù)據(jù)給模板渲染.

(2)生命周期

創(chuàng)建：在創(chuàng)建控制器或指令時(shí)，AngularJS會(huì)用$injector創(chuàng)建一個(gè)新的作用域，并在這個(gè)新建的控制器或指令運(yùn)行時(shí)將作用域傳遞進(jìn)去。

鏈接：當(dāng)Angular開始運(yùn)行時(shí)，所有的$scope對(duì)象都會(huì)附加或者鏈接到視圖中。所有創(chuàng)建$scope對(duì)象的函數(shù)也會(huì)將自身附加到視圖中。這些作用域?qū)?huì)注冊(cè)當(dāng)Angular應(yīng)用上下文中發(fā)生變化時(shí)需要運(yùn)行的函數(shù)。這些函數(shù)被稱為$watch函數(shù)，Angular通過(guò)這些函數(shù)獲知何時(shí)啟動(dòng)事件循環(huán)。

更新：當(dāng)事件循環(huán)運(yùn)行時(shí)，它通常執(zhí)行在頂層$scope對(duì)象上（被稱作$rootScope），每個(gè)子作用域都執(zhí)行自己的臟值檢測(cè)。每個(gè)監(jiān)控函數(shù)都會(huì)檢查變化。如果檢測(cè)到任意變化，$scope對(duì)象就會(huì)觸發(fā)指定的回調(diào)函數(shù)。
銷毀：當(dāng)一個(gè)$scope在視圖中不再需要時(shí)，這個(gè)作用域?qū)?huì)清理和銷毀自己。盡管永遠(yuǎn)不會(huì)需要清理作用域（因?yàn)锳ngular會(huì)為你處理），但是知道是誰(shuí)創(chuàng)建了這個(gè)作用域還是有用的，因?yàn)槟憧梢允褂眠@個(gè)$scope上叫做$destory()的方法來(lái)清理這個(gè)作用域。

3、原型繼承

scope是AngularJS中的作用域(其實(shí)就是存儲(chǔ)數(shù)據(jù)的地方)，很類似JavaScript的原型鏈。搜索的時(shí)候，優(yōu)先找自己的scope，如果沒(méi)有找到就沿著作用域鏈向上搜索，直至到達(dá)根作用域rootScope。

<!DOCTYPE html>
          <html>
          <head>
           <title></title>
          </head>
          <body ng-app="myApp">
          <div ng-controller="parentController">
            {{name}}
            <div ng-controller="sonController">
              {{name}}
            </div>
          </body>
          <script type="text/javascript" src="./angular.min.js"></script>
          <script>
            var parentController=function($scope){
              $scope.name="parent";
            }
            var sonController=function($scope){
              console.log($scope.name);//parent
            }
            parentController.$injector=["$scope"];
            sonController.$injector=["$scope"];
            angular.module("myApp",[])
            .controller("parentController",parentController)
            .controller("sonController",sonController)
          </script>
          </html>

首先子控制器在自己的作用域內(nèi)查找name屬性，沒(méi)找到，向父控制器找。

補(bǔ)充一點(diǎn)，如何在子控制器中修改父控制器中$scope的值，可見(jiàn)如下：

$scope.$parent.name="son";在子控制器中$scope.$parent就表示父控制器中的$scope,然后修改其值即可。

4、$new

$scope.$new(isolated，parent);用于定義scope的child scope

1）參數(shù)：isolated，是否是隔離的。如果值是true，那么這個(gè)scope不會(huì)從父scope繼承原型。作用域是獨(dú)立的，在這里不能看見(jiàn)父scope的屬性。如果值為false，則繼承自父（可以訪問(wèn)父scope的所有成員），默認(rèn)為false!

parent 用于指定創(chuàng)建的子scope的父scope，如果沒(méi)有此參數(shù)，則父scope為調(diào)用當(dāng)前$new方法的$scope

  var myController=function($scope){
    $scope.data="hello!"
    var scope1=$scope.$new(false,$scope);
    console.log(scope1.data); //hello! scope1繼承了$scope,所以可以訪問(wèn)到data
    var scope2=$scope.$new(true,$scope); 
    console.log(scope2.data);// undefined 第一個(gè)參數(shù)為true，表示是隔離的，無(wú)法繼承，自己又沒(méi)有，故為undefined
  }
  myController.$injector=["$scope"];
  angular.module("myApp",[])
  .controller("myController",myController)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: