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 作用域操作的更多相关文章
- AngularJs之Scope作用域
前言: 上篇博文AngularJs之directive中说了Scope作用域是个大坑,所以拿出来作为重点总结! 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执 ...
- Angular - - $rootScope.Scope
这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等. $rootScope.Scope 可以使用$injector通过$rootScope关键字检索的一个根作用域. 可以通 ...
- AngularJS–Scope(作用域)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Scope Scope 是一个应用程序的模块的对象.它是表达式的执行上下文.它充斥在DO ...
- AngularJS Scope(作用域)
1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sc ...
- Spring中scope作用域
scope作用域: 1.prototype 2.request 3.session 4.singleton 5.global session 1.prototype(多例) prototyp ...
- Angular JS 学习之 Scope作用域
1.Scope作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带: Scope是一个对象,有可用的方法和属性: Scope可应用在视图和控制器上: 2.当你在AngularJS中 ...
- AngularJs(五)从Controller控制器谈谈$scope作用域
大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controll ...
- 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备!
作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...
- AngularJS学习之旅—AngularJS Scope作用域(五)
1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...
随机推荐
- 继续node爬虫 — 百行代码自制自动AC机器人日解千题攻占HDOJ
前言 不说话,先猛戳 Ranklist 看我排名. 这是用 node 自动刷题大概半天的 "战绩",本文就来为大家简单讲解下如何用 node 做一个 "自动AC机&quo ...
- Nodejs进阶:如何玩转子进程(child_process)
本文摘录自个人总结<Nodejs学习笔记>,更多章节及更新,请访问 github主页地址.欢迎加群交流,群号 197339705. 模块概览 在node中,child_process这个模 ...
- Linux终端更改提示符
打开~/.bashrc可以看到命令提示的内容为:\u@\h\w\$ \u表示用户名,\h表示主机名,\w表示当前目录,\$表示命令提示符(普通用户$,超级用户#) 这个命令提示符有点长,很碍事,\u@ ...
- mysql 安装失败解决方法
在安装mysql的过程中,出现的最麻烦的问题和解决方法 安装后,启动不成功,就卡了,程序就没有响应. 如何解决: 找到mysql安装目录下的 #Path to the database root da ...
- AngularJS指令的详解
指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.指令是我们用来扩展浏览器能力的技术 ...
- js实现倒计时效果
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...
- 把php上传sae问题要使用IO
应用移植指南 一,为什么要移植应用 SAE禁止IO写操作,代码目录不能写入.这意味着普通程序的上传图片.生成缓存等操作都不能在SAE上正常运行,这时候你需要对这些代码进行修改后才能让你的程序运行在SA ...
- Android获取屏幕宽度、高度的4种方法
记录学习之用,有相同的问题可以参考 方法一: WindowManager wm = (WindowManager) this .getSystemService(Context.WINDOW_SERV ...
- 【CodeVS 5032】【省队集训2016 Day5 T1】Play with array
一开始我用分块大法,分成$\sqrt{n}$块,每个块上维护一个Splay,然后balabala维护一下,时间复杂度是$O(n\sqrt{n}logn)$.后来对拍的时候发现比$O(n^2)$的暴力跑 ...
- NHibernate中session.update()及session.merge()的区别
今天的工作中遇到一个奇怪的问题,如下: "a different object with the same identifier value was already associated w ...