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上的属性...

巴特西

AngularJs $rootScope.Scope 作用域操作

最新文章

热门文章