AngularJS 事件$emit 和$broadcast

页面之间信息传递(子页面->父页面), $emit冒泡事件。

要把事件沿着作用域链向上派送(从子作用域到父作用域),我们要使用$emit()函数

在一个

$emit()事件函数的调用中,事件从子作用域冒泡到父作用域。在产生事件的作用域

之上的所有作用域都会收到这个事件的通知。

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

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

1.name(字符串)要发出的事件名称。

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

$emit()方法返回了一个事件对象(关于事件对象的细节,查看20.3节)。从监听器中发出的一切异常都会传递到$exceptionHandler服务中。

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

在$broadcast()方法上,每个注册了监听器的子作用域都会收到这个信息。事件传播到所有的指令和当前作用域的间接作用域上,并且一路往下调用每个监听器。

要监听一个事件,我们可以使用$on()方法。这个方法为具有某个特定名称的事件注册了一个监听器。事件名称就是在

Angular中触发的事件类型。

例如,我们可以在路由变更过程被触发时,监听事件:

scope.$on(‘$routeChangeStart‘,

function(evt, next, current) {

//一个新的路由被触发了

});

不管什么时候事件$routeChangeStart(路由将要变更的时候,会广播这个事件)被触发,

监听器(这个函数)都会被调用。Angular把evt对象作为第一个参数传给正在监听的一切事件,不管它是我们自定义的事件还是内置的Angular服务。

时间: 2024-07-28 18:57:45

AngularJS 事件$emit 和$broadcast的相关文章

AngularJS 笔记——$on、$emit和$broadcast的使用与区别

AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$rootScope的,或者说都是嵌套在主作用域下面的.很多时候,你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么. 那么在这种情况下,如何在作用域之间通信呢?其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 在AngularJS中还有另外一个选

angularjs的$on、$emit、$broadcast

如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你必须选择是否与父级作用域或者子作用域通信. $on.$emit和$broadcast使得event.data在controller之间的传递变的简单.$emit:子传父 传递event与data$broadcast:父传子 child controller传递event与data$on:监听或接收数

AngularJS的学习 $on、$emit和$broadcast的使用

$on.$emit和$broadcast使得event.data在controller之间的传递变的简单. $emit只能向parent controller传递event与data $broadcast只能向child controller传递event与data $on用于接收event与data 请看博客:http://www.it165.net/pro/html/201404/12610.html

angularJS 系列(六)---$emit(), $on(), $broadcast()的使用

下面以一个例子来讲述 angular 中的event system,有$emit(), $on(), $broadcast().效果图如下 下面的代码中,用到了 controller AS 的语法,具体这种语法的使用情况,好处或是与 原来 直接在 Controller中把视图对象直接绑定到 $scope 对象上面的区别, 可以查看我之前的一片博文. 直接贴代码 <!DOCTYPE html> <html> <head> <link rel="styles

angularJs--$on、$emit和$broadcast的使用

$emit只能向parent controller传递event与data $broadcast只能向child controller传递event与data $on用于接收event与data 例子如下 html代码 <div ng-controller="ParentCtrl"> <!--父级--> <div ng-controller="SelfCtrl"> <!--自己--> <a ng-click=&q

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

Angular按照发布/订阅模式设计了其事件系统,使用时需要"发布"事件,并在适当的位置"订阅"或"退订"事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$scope和$rootScope的$emit.$broadcast和$on方法.本文介绍Angular的事件机制,包括$scope和$rootScope处理事件上的异同,$broadcast.$emit和$on的使用方式及他们区别等内容. $scope

AngularJS里面$emit, $broadcast,$on,$http.Jsonp,constant是使用笔记

本片主要介绍$emit, $broadcast,$on经常开发的用法! 这张图差不多表明了$emit, $broadcast在aj里面的机制和用场! 这篇文章介绍了aj里面使用jsonp的原理和注意的地方! 下面直接显示下我运行起来的界面! 然后贴上DOM和js代码,本篇不多说,分享一些常用的东西! DOM+js  代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

理解angularJs中的$on,$broadcast,$emit

$emit作用是将一个事件从子作用域广播至父作用域,直至根作用域.(包括自己) $emit有两个参数name和args,name就是需要广播的名字,args是一个或者多个参数. $broadcast的参数与$emit差不多,一个是名字,一个是参数. $broadcast是为了使一个事件从父做用语向子作用域广播.(包括自己) 相同的一点是:$emit,$broadcast都需要绑定事件.像这样: $scope.eventName = function () { $broadcast(broadca

$on、$emit和$broadcast的使用

$emit只能向parent controller传递event与data( $emit(name, args) ) $broadcast只能向child controller传递event与data( $broadcast(name, args) ) $on用于接收event与data( $on(name, listener) ) <div ng-controller="ParentCtrl"> <!--父级--> <div ng-controller=