这里讲的是一些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">
<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上的属性...

Angular - - $rootScope.Scope的更多相关文章

  1. AngularJs $rootScope.Scope 作用域操作

    这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等. $rootScope.Scope 可以使用$injector通过$rootScope关键字检索的一个根作用域. 可以通 ...

  2. Angular $scope和$rootScope事件机制之$emit、$broadcast和$on

    Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...

  3. AngularJS的$rootScope和$scope联系和区别

    scope是html和单个controller之间的桥梁,数据绑定就靠他了. rootscope是各个controller中scope的桥梁.用rootscope定义的值,可以在各个controlle ...

  4. AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系

    Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁 ...

  5. AngularJS Scope(作用域)

    1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...

  6. Angular $watch

    如果想在某个属性发生变化的时候执行某些操作,那么scope.$watch是最佳选择 https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$w ...

  7. Angularjs scope

    $scope: var myapp = angular.module('myapp', []); myapp .controller('parent', function ($scope,$timeo ...

  8. 【原创】angularjs1.3.0源码解析之scope

    Angular作用域 前言 之前我们探讨过Angular的执行流程,在一切准备工作就绪后(我是指所有directive和service都装载完毕),接下来其实就是编译dom(从指定的根节点开始遍历do ...

  9. Angularjs Scope 原型链

    我们知道scope是可以继承的.scope的继承和js原型链是同一个概念. <div ng-controller="parentCtrl"> {{name}} < ...

随机推荐

  1. Intergate flot with Angular js ——Angular 图形报表

    下面这篇文章最终的结论就是 Flot 插件 结合 Angular 的Directive 来处理 图表的绘制 给出github上的一个demo源码.https://gist.github.com/fly ...

  2. 转: window中使用PSFTP/WinSCP实现SFTP上传下载

    sftp 服务器:  dbmonitor 1.sftp属于交互式的,所以你得缓存下命令#!/bin/shsftp -o Port=3322 root@172.16.1.21:/opt << ...

  3. 字符串解析运用-将字符串分解为多个整数,求各整数之和(华为oj)

    描述 输入内容是一个字符串,输出结果为一个字符串.要求在输入的字符串中识别出多个整数单元,并且对各个整数单元求和运算,最终输出一个字符串,输出的字符串内容是对各个整数单元求和的结果.两个整数单元之间以 ...

  4. HDU 1896 Stones(优先队列)

    还是优先队列 #include<iostream> #include<cstdio> #include<cstring> #include<queue> ...

  5. 方便android开发网站:

    可以通过输入包名或者Google Play地址消灾google市场的应用 http://apps.evozi.com/apk-downloader/ 16进制转常用的10进制 http://www.b ...

  6. 基于Spring的异步系统实现方案

    一般的实现方案 发送异步消息所使用的工具类: import java.util.Date; import javax.jms.Destination; import javax.jms.JMSExce ...

  7. Android Studio的使用(四)--生成Get、Set方法

    如何快速生成Get.Set方法,在我们编程中经常使用,下面将详细介绍. 1.右击代码编辑区域,并选择Generate. 2.在弹出框中选择Getter and Setter. 3.在弹出框中全选所有变 ...

  8. android缓存之Lrucache 和LinkedHashMap

    两者的区别 网上有很多人使用软引用加载图片的多 ,但是现在已经不再推荐使用这种方式了,(1)因为从 Android 2.3 (API Level 9)开始,垃圾回收器会更倾向于回收持有软引用或弱引用的 ...

  9. ural1613 For Fans of Statistics

    For Fans of Statistics Time limit: 1.0 secondMemory limit: 64 MB Have you ever thought about how man ...

  10. CodeForces 616B Dinner with Emma

    水题 #include<cstdio> #include<cstring> #include<algorithm> using namespace std; +; ...