在一些使用angular框架的大型項目中,似乎有很多個controller,而每個controller都有自己的$scope.
1、$rootscope
$rootScope頂級作用域,也叫根作用域,類似于window,window的屬性在任何子作用域都可以訪問。$rootScope則是所有controller進行數據溝通的中間域,即在$rootScope中的數據,在每個controller中都能通過$rootScope.xxx獲取到。
2、$scope
(1)作用
$scope 就在視圖和控制器之間建立了一個橋梁,基于作用域視圖在修改數據時會立刻更新 $scope,同樣的 $scope 發生改變時也會立刻重新渲染視圖.每個控制器controller對應一個$scope,通過為其屬性賦值,可以傳遞數據給模板渲染.
(2)生命周期
創建:在創建控制器或指令時,AngularJS會用$injector創建一個新的作用域,并在這個新建的控制器或指令運行時將作用域傳遞進去。
鏈接:當Angular開始運行時,所有的$scope對象都會附加或者鏈接到視圖中。所有創建$scope對象的函數也會將自身附加到視圖中。這些作用域將會注冊當Angular應用上下文中發生變化時需要運行的函數。這些函數被稱為$watch函數,Angular通過這些函數獲知何時啟動事件循環。
更新:當事件循環運行時,它通常執行在頂層$scope對象上(被稱作$rootScope),每個子作用域都執行自己的臟值檢測。每個監控函數都會檢查變化。如果檢測到任意變化,$scope對象就會觸發指定的回調函數。
銷毀:當一個$scope在視圖中不再需要時,這個作用域將會清理和銷毀自己。盡管永遠不會需要清理作用域(因為Angular會為你處理),但是知道是誰創建了這個作用域還是有用的,因為你可以使用這個$scope上叫做$destory()的方法來清理這個作用域。
3、原型繼承
scope是AngularJS中的作用域(其實就是存儲數據的地方),很類似JavaScript的原型鏈 。搜索的時候,優先找自己的scope,如果沒有找到就沿著作用域鏈向上搜索,直至到達根作用域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>
新聞熱點
疑難解答
圖片精選