夺命雷公狗—angularjs—18—angularjs的事件
对于一款前端框架,提起事件,很容易让人联想到DOM事件,比如说鼠标点击以及页面滚动等。但是我们这里说的angular中的事件和DOM事件并不是一个东西。
事件的发布
我们可以通过 $emit()
以及 $broadcast() 来发布事件
$emit(name, args)
name 发布的事件名称
args 会作为对象传递到事件的监听器中
$emit() 发布的事件,会从子作用域冒泡到父作用域,产生事件的作用域之上的所有作用域都会收到这个事件的通知。
$broadcast(name, args)
同 $emit 的参数一直,name 作为事件的名字,args 作为监听器接受 的参数。使用该方法事件的传播方向是从上至下,即从父作用域到子作用域。
事件的监听
事件发布了,我们要注册监听事件的服务,才会对事件进行响应
可以通过 $on() 方法来注册事件监听事件。
$scope.$on(name, listenerFn)
当以 name 为事件名的事件被促发之后,listenerFn 事件就会被执行。
$on() 返回一个反注册函数,可以用其来取消监听器。
事件对象
所有的事件监听器第一个参数都代表了事件对象,该对象有以下属性:
targetScope 作用域对象,发送事件的作用域
currentScope :当前处理事件的作用域
name: 当前事件的事件的名称
stopPropagation: 取消$emit触发的事件进一步的传播
preventDefaul: 把defaultPreevented标志设置为true,告诉子作用域可以无需处理该事件。
defaultPreevented:布尔值
angular: 内置事件
$includeContentLoaded($emit事件)
ngInclude内容重新加载的时候,从ngInclude指令触发
$includeContentRequested($emit事件)
从调用ngInclude的作用域上发送,每次ngInclude的内容被请求的时候,都会发布该事件
$viewContentLoaded($emit事件)
当ngView内容被重新加载时,从ngView作用域上发布
$locationChangeStart($broadcast事件)
通过$location服务对浏览器的地址更新时会触发$locationChangeStart事件
$locationChangeSuccess($broadcast事件)
当浏览器的地址成功变更时触发
$routeChangeStart($broadcast事件)
在路由变更发生之前,该事件从$rootScope发布
夺命雷公狗—angularjs—18—angularjs的事件的更多相关文章
- 夺命雷公狗—angularjs—6—单条数据的遍历
我们在实际的工作中常常会处理到一些数据的遍历,这些数据都是后端传到前端的,有些公司会让前端帮忙处理一点遍历的工作,废话不多说,直接上代: <!doctype html> <html ...
- 夺命雷公狗---微信开发17----自定义菜单的事件推送,响应菜单的CLICK
废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "com ...
- 夺命雷公狗---微信开发59----在线点播电影网1之ckplayer播放器
我们节课程就要开始写一个小项目了,这项目主要是写一个在线点播电影影网的,我们用到的播放器是ckplayer ckplayer基本介绍: ckplayer的全称是:超酷flv播放器,他是一款用于网页上播 ...
- 夺命雷公狗-----React---12--添加类和样式
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...
- 夺命雷公狗-----React---11--添加css样式的方法
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...
- 夺命雷公狗-----React---10--组建嵌套进行数据遍历
先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 夺命雷公狗-----React---9--map数据的遍历
比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...
- 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定
首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 夺命雷公狗-----React---7--组建的状态props和state
props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...
- 夺命雷公狗-----React---6--props多属性的传递
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Angular自动双向绑定值
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...
- img图片之间的间距问题
[问题]页面中如果有多张图片,那么图片之间会有一些间距,在某些情况下(如切好的图片再次拼接),在显示上就会出现一些问题.效果如下: 对应代码: <div class="f0" ...
- Android笔记:Socket通讯常见问题
经验证的socket通讯问题 1.如果是模拟器和本机PC直接通讯,需要使用本机IP地址 而不是 10.0.2.2 如本机的静态地址为192.168.1.2 则直接使用该地址 2.接收和连接代码不能在 ...
- iOS 给UILabel文字加下划线
摘自:http://blog.sina.com.cn/s/blog_6cd380c10101b6hn.html //带下划线的“注” NSMutableAttributedString可变的属性字符串 ...
- GitHub 客户端
GitHub客户端下载官网:https://desktop.github.com/ GitHubFlow:https://guides.github.com/introduction/flow/ 客户 ...
- search支持多种标签
织梦的搜索页面支持dede标签的方法一 打开文件:include/arc.searchview.class.php 找到: require_once(DEDEINC."/taglib/hot ...
- (转)Eclipse New Server 【无法输入server name】
I was trying to add Tomcat 7 in my Eclipse in Ubuntu. When I click “Add new server” in Eclipse and s ...
- Java遇见HTML——JSP篇之JSP内置对象(上)
一.JSP内置对象简介 1.1.内置对象简介 JSP内置对象是WEB容器中创建的一组对象,可以直接使用不需要new,如截图中的out 对象. JSP有九大内置对象: 五大常用对象: out.reque ...
- 第五篇 SQL Server安全架构和安全
本篇文章是SQL Server安全系列的第五篇,详细内容请参考原文. 架构本质上是一个数据库对象,其他对象的一个容器,在复杂的数据库中它能够很容易的管理各组对象.架构具有重要的安全功能.在这一篇你会学 ...
- Uint8Array 对象
8 位无符号整数值的类型化数组.内容将初始化为 0.如果无法分配请求数目的字节,则将引发异常. 语法 uint8Array = new Uint8Array( length ); uint8Array ...