AngularJS中的事件
欢迎大家指导与讨论 : ）
前言
Angular的作用域在本质上是分层次的(有的住户在低层, 有的住户在高层), 它们可以通过父子关系很自然地进行沟通。但通常, 这种沟通是单向的(父->子的单向沟通), 并且它们的作用域不共享变量, 它们的执行功能往往也各不相同, 也与它们父树上的位置无关。因此，在这种情况下，我们可以通过在这个链上传递事件的方式在作用域之间通讯(住在第n层的居委会主席对他的手下说: '嘿! 哥们! 麻烦帮我逐层告诉这栋楼的楼上/楼下的住户, 他们该交电费啦!')。注意, 受作用的只有某条链(隔壁楼的住户可不会听你的话哦)
彩蛋——父子作用域间共享变量
如果才能令父子作用域间可共享变量呢？(不单是父->子的方向, 还有子->父的方向)。答案是, 让子作用域"继承"父作用域$scope对象上的某一对象。
<div ng-controller="parent">
父：{{ model.test }}
<button ng-click="change1();">点我by父亲</button>
<div ng-controller="child">
子：{{ model.test }}
<button ng-click="change2();">点我by儿子</button>
</div>
</div>
app.controller('parent', ['$scope', function($scope){
$scope.model = {};
$scope.model.test = '父亲';
$scope.change1 = function(){
$scope.model.test = '父亲导致的改变';
}
}]);
app.controller('child', ['$scope', function($scope){
$scope.change2 = function(){
$scope.model.test = '儿子导致的改变';
}
}])
通讯——在链上传递事件
下面的这个例子可以说明, 在一个"根"作用域下, 设置了两条"链"(两栋楼)。 实验可见: 楼A的事件传递, 不会被楼B的住户所接受：事件传递是在单链上的。但每条链的链头必定是$rootScope作用域
<body ng-controller="rootController">
<div ng-controller="leftParent">
<div ng-controller="SelfCtrl">
<a ng-click="click();">点我</a>
<div ng-controller="ChildCtrl"></div>
</div>
<div ng-controller="BroCtrl"></div>
</div>
<div ng-controller="rightParent"> </div>
</body>
app.controller('rootController', ['$scope', function($scope){
}]);
app.controller('leftParent', ['$scope', function($scope){
$scope.$on('to-parent', function(d,data) {
console.log(data); //父级能得到值
});
$scope.$on('to-child', function(d,data) {
console.log(data); //子级得不到值
});
}]);
app.controller('SelfCtrl', ['$scope', function($scope){
$scope.click = function(){
$scope.$broadcast('to-child', 'child');
$scope.$emit('to-parent', 'parent');
}
}]);
app.controller('ChildCtrl', ['$scope', function($scope){
$scope.$on('to-child', function(d,data) {
console.log(data); //子级能得到值
});
$scope.$on('to-parent', function(d,data) {
console.log(data); //父级得不到值
});
}]);
app.controller('BroCtrl', ['$scope', function($scope){
$scope.$on('to-parent', function(d,data) {
console.log(data); //平级得不到值
});
$scope.$on('to-child', function(d,data) {
console.log(data); //平级得不到值
});
}]);
app.controller('rightParent', ['$scope', function($scope){
$scope.$on('to-parent', function(d,data) {
console.log(data); //其它链上不能获取事件
});
$scope.$on('to-child', function(d,data) {
console.log(data); //其它链上不能获取事件
});
}]);
传递的方向——$broadcast和$emit
一方面, 如果要提醒一个全局模块, 我们最终需要通知高层次的作用域(如$rootScope), 则需要把事件向上传递($emit)。另一方面, 如果是一个选项卡指令和它的子面板指令之间的通讯, 则把事件向下传递($broadcast)
$broadcast(name, args){//...} $emit(name, args)(//...) 其中, name是事件的名称, 而args是参数集合(可以把参数集合到某一$scope对象里, 再把该对象传出)
事件监听——$on
当住户知道今天该交水费的时候, 就会安排一个人在家呆着, 等待"收水费"(为某个特定名称的事件注册监听器)的同学来进行配合。要监听事件，我们可以使用$on方法
$scope.$on('to-parent', function(event,data) {
console.log(data);
});
其中, event是事件对象，它是事件监听函数的首位参数，它拥有以下几个属性
1. targetScope(作用域对象) 这个属性是发送或者广播事件的作用域
2. name 正在处理事件的名称
3. currentScope 处理当前事件的作用域
4. stopPropagation(函数) 阻止通过$emit的事件传播进一步往上冒泡
5. preventDefault(函数) 书上原文是"告诉子作用域无需处理事件", 但实验发现存在问题, 不知道是不是我使用的方法不对。这里举一个阻止默认行为的例子
例子——锚点的preventDefault
app.directive('a', function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
elem.on('click', function(e){
e.preventDefault();
});
}
}
};
});
6. defaultPrevented(布尔值) 调用preventDefault()会把defaultPrevented设置为true
事件相关的核心服务
$emitted事件
$scope.$on('$includeContentLoaded', function(evt){//...})
1. $includeContentLoaded 该事件在ngInclude的内容重新加载时从ngInclude指令上发出
2. $includeContentRequested 每次ngInclude的内容被请求是，它都会被发送
3. $viewContentLoaded ngView内容被重新加载时，在当前ngView作用域上发送
$broadcast事件
1. $locationChangeStart (注: 事件的触发应该是先location后route事件)
2. $locationChangeSuccess
3. $routeChangeStart
4. $routeChangeSuccess
5. $routeChangeError
6. $routeUpdate
7. $destroy
资料参考
《AngularJS权威指南》P287
AngularJS中的事件的更多相关文章
- Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格 ...
- angularjs中阻止事件冒泡，以及指令的注意点
appModule.directive('newStr',function(){ return{ restrict:'AE', //阻止事件冒泡需要加$event参数 template:`<di ...
- AngularJS中的DOM与事件
前 言 AngularJS中的DOM与事件 AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled="true/false" ...
- Angularjs 中使用指令绑定点击事件
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...
- 关于AngularJs中监听事件及脏循环的理解
可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...
- AngularJS中的指令全面解析（转载）
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- AngularJS中的控制器和作用域
欢迎大家指导与讨论 : ) 一. 作用域的事件传播 一 . 1 修改的传播 关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的.简而言之,就是即时您只修 ...
- AngularJS中实现无限级联动菜单
多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的 ...
- AngularJS 学习之事件
1.ng-click指令:定义了AngularJS点击事件 <div ng-app="" ng-controller="myCtrl"> <b ...
随机推荐
- Java中用内存映射处理大文件
在处理大文件时,如果利用普通的FileInputStream 或者FileOutputStream 抑或RandomAccessFile 来进行频繁的读写操作,都将导致进程因频繁读写外存而降低速度.如 ...
- ＃VSTS定制＃全新的模版定制能力
在应用生命周期管理(ALM)领域中,存在各种不同的管理模型,如:传统的瀑布(waterfall)模型,CMMI模型以及最近一些年开始流行的敏捷模型,Scrum模型,kanban等等.每个不同的管理模型 ...
- ORACLE数据库对比表结构
有时候会有某种需求:需要对比两个表的表结构是否一致,有时候甚至是整个数据库所有表的表结构对比.......表结构对比无非就是字段名.字段类型.字段数据类型.以及字段的顺序的对比.如果需要对比表结构,可 ...
- RabbitMQ入门教程——.NET客户端使用
众所周知RabbitMQ使用的是AMQP协议.我们知道AMQP是一种网络协议,能够支持符合要求的客户端应用和消息中间件代理之间进行通信. 其中消息代理扮演的角色就是从生产者那儿接受消息,并根据既定的路 ...
- 烂泥：学习ubuntu远程桌面（二）：远程桌面会话管理
本文由秀依林枫提供友情赞助,首发于烂泥行天下 在上一篇文章中,我们讲解了如何给ubuntu安装远程桌面及其配置,这篇文章我们再来讲解下有关ubuntu远程桌面会话的问题. 一.问题描述 在我们使用ub ...
- Linux笔试常见填空题
一．填空题: 在Linux系统中,以 文件 方式访问设备 . Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. Linux文件系统中每个文件用 i节点 来标识. 全部磁盘块 ...
- android Bitmap类方法属性 详细说明
(转:http://blog.csdn.net/ymangu666/article/details/37729109) 1. BitMap类public void recycle()——回收位图占用 ...
- netbeans打包成jar
文件页里找到build.xml文件,打开在</project>前 加入以下代码保存之 按 Ctrl+C 复制代码 <target name="package-for-sto ...
- 调试2440 RAM拷贝至SDRAM遇到的问题
汇编代码主要是初始化一些寄存器,关狗,初始化时钟,初始化存储管理器以便访问内存,然后将SoC上4k RAM数据拷贝至SDRAM,然后在SRAM里面运行,由于代码未正常跑起来,于是使用JLinkExe来 ...
- ARM学习篇 中断定时理解
1. 中断控制器 a. 中断处理流程 P1--摘自S3C2440A手册 P1简要阐述了S3C2440A内置中断控制器处理中断的流程: ●若某中断有自中断,则先接收子中断请求,否则,直接接受源中断. ...