码迷,mamicode.com
首页 > 其他好文 > 详细

angular(20)---事件

时间:2017-03-16 16:28:31      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:异常   --   root   发送   broadcast   返回   ati   stop   共享变量   

Angular的作用域在本质上是分层次的:他们可以通过父子关系很自然地来回沟通。但通常,作用域不共享变量的,他们执行的功能往往各不相同,跟在父树上无关。

在这种情况下,我们可以通过在这个链上传递事件的方式在作用域之间通信。

 

什么是事件?

Angular应用也可以相应Angular事件,这使得我们可以在应用中嵌套的各组件之间进行通信,即使这些组件在创建时并未考虑到其他组件。

注:Angular事件系统并不与浏览器的事件系统相通,这意味着,我们只能在作用域上监听Angular事件而不是DOM事件。

 

一个好的经验法则是:

查看将要触发事件的作用域,如果要通知整个事件系统,就要往下传播。

另一方面,如果要提醒一个全局模块,我们最终需要通知高层次的作用域($rootscope),并且需要把事件向上传递。

1、使用$emit来冒泡事件

要把事件沿着作用域链向上配送,就要使用$emit()函数。

当想要跟应用的其他部分交流状态变更时,我们使用$emit(),如果想要跟$rootscope通信,则需要$emit()这个事件。

$emit()方法带有两个参数。

(1)name(字符串)

要发出的事件的名称

(2)args(集合)

一个参数的集合,作为对象传递到事件监听器中。

$emit()方法返回来一个事件对象,从监听器中发出的一切异常都会床底到$exceptionHandler服务中。

 

2、使用$broadcast向下传递事件

要想把事件向下传递(从父作用域到子作用域),我们使用$broadcase()函数。

$broadcast()方法带有两个参数。

(1)name(字符串)

要发出的事件的名称

(2)args(集合)

一个参数的集合,作为对象传递到事件监听器中。

$broadcast()方法返回来一个事件对象,从监听器中发出的一切异常都会床底到$exceptionHandler服务中。

 

3、事件监听

我们可以使用$on方法,这个方法为鱼油某个特定名称的事件注册了一个监听器,事件名称就是在Angular中触发的事件类型。

例如,我们可以在路由变更过程被触发时,监听事件:
  scope.$on(‘$routeChangeStart‘,
    function(evt, next, current) {
    // 一个新的路由被触发了
  });

 

4、事件对象

事件对象有以下属性。
1.  targetScope (作用域对象)
这个属性是发送或者广播事件的作用域。
2.  currentScope (作用域对象)
这个对象包含了当前处理事件的作用域。
3.  name (字符串)
这个字符串是触发之后,我们正在处理的事件名称。
4.  stopPropagation (函数)
stopPropagation() 函数取消通过 $emit 触发的事件的进一步传播。
5.  preventDefault (函数)
preventDefault 把 defaultPrevented 标志设置为 true 。尽管不能停止事件的传播,我们可
以告诉子作用域无需处理这个事件(也就是说,可以安全地忽略它们) 。

6.  defaultPrevented (布尔值)
调用 preventDefault() 会把 defaultPrevented 设置为 true 。
$on() 函数返回了一个反注册函数,我们可以调用它来取消监听器。

 

angular(20)---事件

标签:异常   --   root   发送   broadcast   返回   ati   stop   共享变量   

原文地址:http://www.cnblogs.com/lywh/p/6559886.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!