AngularJs $rootScope.Scope区别

$rootScope.Scope

可以使用 i n j e c t o r 通 过 injector通过 injectorrootScope关键字检索的一个根作用域。

可以通过$new()方法创建子作用域。(大多子作用域是在HTML模板被执行编译时自动生成)

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

方法:

$new(isolate);

创建一个新的子作用域。

父作用域将会广播 d i g e s t ( ) 和 digest()和 digest()digest()事件。作用域可以使用使用$destroy()从作用域的层级结构中移除。

$destroy()使其所需的范围和它的子作用域范围内永久地从父作用域分离从而停止参与模型变化检测和侦听通知调用。

isolate:boolean类型。如果值是true,那么这个scope不会从父scope继承原型。作用域是独立的,在这里不能看见父scope的属性。

当写小窗户组件的时候,这将是很实用的去防止不小心读取到其父级的状态。

$watch(watchExpression,[listener],[objectEquality]);

注册一个监听器的回调函数,该函数在watchExpression变化的时候被执行。

watchExpressions表达式每次执行都会产生一次 d i g e s t ( ) , 并 且 返 回 一 个 将 会 被 监 听 的 值 。 ( digest(),并且返回一个将会被监听的值。( 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数组里的每一项都被标准的 w a t c h ( ) 操 作 观 察 , 并 且 审 查 每 一 次 的 watch()操作观察,并且审查每一次的 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:一个或多个可选参数,将传递到事件侦听器。

n e w , new, 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上的属性…

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
$scope.$$phase是AngularJS中的一个属性,用于检测当前是否处于脏值检测的过程中。\[1\]在AngularJS中,脏值检测是用来检测数据模型的变化并更新视图的过程。当数据模型发生变化时,AngularJS会自动触发脏值检测,然后更新相应的视图。 在引用\[1\]和引用\[2\]中,$scope.$$phase被用来判断当前是否处于脏值检测的过程中。如果不处于脏值检测的过程中,就可以调用$scope.$apply()方法来手动触发脏值检测,从而更新视图。而如果已经处于脏值检测的过程中,就不需要再调用$scope.$apply()方法了,以避免出现错误。 引用\[3\]中提到了可能会遇到的错误:Error: \[$rootScope:inprog\] $digest already in progress。这个错误表示在脏值检测的过程中又尝试触发了脏值检测,导致了循环调用的错误。为了避免这个错误,可以使用条件判断来判断是否需要调用$scope.$apply()方法,就像引用\[2\]中的代码所示。 综上所述,$scope.$$phase是用来判断当前是否处于脏值检测的过程中的属性。根据不同的情况,可以使用$scope.$apply()方法来手动触发脏值检测,以更新视图。但是需要注意避免在脏值检测的过程中再次触发脏值检测,以避免出现循环调用的错误。 #### 引用[.reference_title] - *1* [angular 手动刷新值 $scope.$apply()](https://blog.csdn.net/lybwwp/article/details/108348059)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [angulr 报错:$digest already in progress](https://blog.csdn.net/Nonsense_man/article/details/91422403)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值