這裏講的是一些scope的操做,如建立/註銷/各類監聽及scope間的通訊等等。express
$rootScope.Scopeapi
可使用$injector經過$rootScope關鍵字檢索的一個根做用域。數組
能夠經過$new()方法建立子做用域。(大多子做用域是在HTML模板被執行編譯時自動生成)瀏覽器
格式:$rootScope.Scope([Providers],[instanceCache])app
[Providers]:當前做用域須要被提供的服務工廠地圖。默認是ng。框架
[instanceCache]:爲須要providers追加/重寫的服務提供預實例化服務。異步
方法:ide
$new(isolate);函數
建立一個新的子做用域。post
父做用域將會廣播$digest()和$digest()事件。做用域可使用使用$destroy()從做用域的層級結構中移除。
$destroy()使其所需的範圍和它的子做用域範圍內永久地從父做用域分離從而中止參與模型變化檢測和偵聽通知調用。
isolate:boolean類型。若是值是true,那麼這個scope不會從父scope繼承原型。做用域是獨立的,在這裏不能看見父scope的屬性。
當寫小窗戶組件的時候,這將是很實用的去防止不當心讀取到其父級的狀態。
$watch(watchExpression,[listener],[objectEquality]);
註冊一個監聽器的回調函數,該函數在watchExpression變化的時候被執行。
watchExpressions表達式每次執行都會產生一次$digest(),而且返回一個將會被監聽的值。($digest()發現watchExpressions發生變化而執行屢次,而且每次都是冪等的)
監聽只有在當前的watchExpressions與以前的值不想等是被調用。變更是根據angular.equals函數判斷的。須要保存對象比較後的值,也須要用到angular.copy。這也意味着看複雜的選項將不利於記憶和性能影響。
監聽可能會改變模型,這可能會引起其餘監聽的變化。Ng會一直執行直到監聽的值穩點。重播迭代極限是10,爲了防止陷入無限循環的死鎖。
watchExpressions:string或者function類型。每一個$digest循環週期的表達式,返回值的變化會觸發調用監聽。
listener: watchexpression的返回值改變時發生回調。
objectEquality:使用angular.equals代替引用相等性比較對象相等比較 (深度監聽)。
$watchGroup(watchExpressions,listener);
針對watchexpressions數組變量的$watch()。集合裏的任何一個表達式變化都將引起監聽的執行。
watchExpressions數組裏的每一項都被標準的$watch()操做觀察,而且審查每一次的$digest()去觀察每一項是否變化。
當watchExpressions數組裏的任何一項發生變化即執行。
$watchCollection(obj,listener);
淺度的觀察對象屬性,而且在其變化時執行(對於數組,這意味着看數組項;對於對象,這意味着看屬性)。若是檢測到更改,則該偵聽器將被觸發。
$digest();
處理全部的當前做用域和它的子做用域的監聽。由於監聽可能改變模型,因此$digest()會一直執行知道模型穩定。這意味這他可能進入無限循環。若是迭代次數超過10,這個函數將拋出「Maximum iteration limit exceeded」錯誤。
$destroy();
從父域中刪除當前的scope(及其全部的子scope)。刪除意味着$digest()再也不傳播到目前做用域及其子做用域。刪除也意味着目前的做用域符合垃圾集合的條件。
$eval([expression],[locals]);
在當前做用域上執行表達式並返回結果。表達式的任何異常將傳播(捕獲)。在求Angular表達式的值的時候有用。
$evalAsync([expression]);
在稍後的時間點上執行當前範圍的表達式(異步)。
$apply([exp]);
$apply() 用來在Angular框架外執行angular內部的表達式。(例如瀏覽器的DOM事件,setTimeout,XHR或第三方庫)。
$on(name,listener);
監聽一個給定類型的事件。
name:監聽的事件名。
listener:當事件發生時調用的函數。
$emit(name,args);
向上級已註冊的做用域傳播指定的事件,直到根做用域。
name:發出的事件名稱。
args:一個或多個可選參數,將傳遞到事件偵聽器。
$broadcast(name,args);
向下級已註冊的做用域廣播指定的事件。
name:發出的事件名稱。
args:一個或多個可選參數,將傳遞到事件偵聽器。
$new,$destroy,$watch使用代碼:
<div ng-app="Demo"> <div ng-controller="testCtrl as ctrl"> <input ng-model="ctrl.text.words" /> <input ng-list="," ng-model="ctrl.list" /> </div> </div>
(function () { angular.module("Demo", []) .run(["$rootScope",rootScope]) .controller("testCtrl",["$scope",testCtrl]) function rootScope($rootScope){ var rootScope = $rootScope; var _scope = rootScope.$new(); _scope.value = "Hello World"; _scope.$destroy();//$$destroyed:true }; function testCtrl($scope){ var vm = this; vm.text = { words:"Hello World",id:1}; $scope.$watch("ctrl.text",function(n,o){ console.log(n,o); // n 新值 o 舊值 },true); vm.list = ["a","b","c","d"]; $scope.$watchCollection("ctrl.list",function(n,o){ console.log(n,o); // n 新值 o 舊值 }); }; }());
$on,$emit,$broadcast使用代碼:
<div ng-app="Demo"> <div ng-controller="testCtrl as ctrl"> {{ctrl.number||'Here where receive a number from childScope'}} <div ng-controller="childCtrlOne as childOne"> <input type="button" ng-click="childOne.toFatherScope()" value="click me" /> </div> <div ng-controller="childCtrlTwo as childTwo"> {{childTwo.number||'Here where receive a number from fatherScope'}} </div> </div> </div>
(function () { angular.module("Demo", []) .controller("testCtrl",["$scope",testCtrl]) .controller("childCtrlOne",["$scope",childCtrlOne]) .controller("childCtrlTwo",["$scope",childCtrlTwo]) function testCtrl($scope){ var vm = this; $scope.$on("toFather",function(e,v){ vm.number = v; $scope.$broadcast("toChild",v); }) }; function childCtrlOne($scope){ var vm = this; var count = 0; vm.toFatherScope = function(){ count += 1; $scope.$emit("toFather",count); } } function childCtrlTwo($scope){ var vm = this; $scope.$on("toChild",function(e,v){ vm.number = v; }) } }());
大體就學習歸總出來這些,果真本身去api 翻成中文理解一遍,再寫代碼運行一遍,會對這些函數的意思和用法瞭解的多。簡單的說下對scope的理解,就跟樹結構同樣,從rootScope做爲 根節點開始擴散,有父子關係的,有兄弟關係的,並且帶有繼承,子scope繼承父scope上的屬性...