AngularJs $rootScope.Scope 作用域操作


這里講的是一些scope的操作,如創建/注銷/各種監聽及scope間的通信等等。

$rootScope.Scope

可以使用$injector通過$rootScope關鍵字檢索的一個根作用域。

可以通過$new()方法創建子作用域。(大多子作用域是在HTML模板被執行編譯時自動生成)

格式:$rootScope.Scope([Providers],[instanceCache])

[Providers]:當前作用域需要被提供的服務工廠地圖。默認是ng。

[instanceCache]:為需要providers追加/重寫的服務提供預實例化服務。

方法

$new(isolate);

創建一個新的子作用域。

父作用域將會廣播$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" ng-controller="testCtrl as ctrl">
       <input ng-model="ctrl.text.words" />
       <input ng-list="," ng-model="ctrl.list" />
  </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){
         this.text = { words:"Hello World",id:1};
         $scope.$watch("ctrl.text",function(n,o){
            console.log(n,o); // n 新值  o 舊值
         },true);
         this.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 count = 0;
      this.toFatherScope = function(){
          count += 1;
          $scope.$emit("toFather",count);
      }
    }
    function childCtrlTwo($scope){
       var vm = this;
       $scope.$on("toChild",function(e,v){
          vm.number = v;
      })
    }  
  }());

簡單的說下對scope的理解,就跟樹結構一樣,從rootScope作為根節點開始擴散,有父子關系的,有兄弟關系的,而且帶有繼承,子scope繼承父scope上的屬性...


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM