您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關angular中的作用域是什么,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據這篇文章可以有所收獲。
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>
首先子控制器在自己的作用域內查找name屬性,沒找到,向父控制器找。
補充一點,如何在子控制器中修改父控制器中$scope的值,可見如下:
$scope.$parent.name="son";在子控制器中$scope.$parent就表示父控制器中的$scope,然后修改其值即可。
4、$new
$scope.$new(isolated,parent);用于定義scope的child scope
1)參數:isolated,是否是隔離的。如果值是true,那么這個scope不會從父scope繼承原型。作用域是獨立的,在這里不能看見父scope的屬性。如果值為false,則繼承自父(可以訪問父scope的所有成員),默認為false!
parent 用于指定創建的子scope的父scope,如果沒有此參數,則父scope為調用當前$new方法的$scope
var myController=function($scope){ $scope.data="hello!" var scope1=$scope.$new(false,$scope); console.log(scope1.data); //hello! scope1繼承了$scope,所以可以訪問到data var scope2=$scope.$new(true,$scope); console.log(scope2.data);// undefined 第一個參數為true,表示是隔離的,無法繼承,自己又沒有,故為undefined } myController.$injector=["$scope"]; angular.module("myApp",[]) .controller("myController",myController)
看完上述內容,你們對angular中的作用域是什么有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業資訊頻道,感謝大家的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。