angularjs中的事件传播$emit,$broadcast,$on
Posted ForYouForMe
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs中的事件传播$emit,$broadcast,$on相关的知识，希望对你有一定的参考价值。
在这里写的技术点 一部分参考AngularJs权威教程一部分参考的是其它的博主的知识点
事件 :如同浏览器响应浏览器层的事件，比如鼠标点击、页面滚动那样，Angular应用也可以响应Angular事件.
这使我们在我们应用中嵌套各组件之间进行通信,即使这些组件在创建的时候并未考虑其他组件.我们可以认为事件是在应用中传播的事件信息片段,通常包含应用中发生的事件信息
注意: AnjularJs事件系统并不与浏览器中的事件系统相通,这意问着我们只能在作用域上监听Angular事件而不是在DOM事件
1.$emit事件函数的调用中,事件从子作用域冒泡到父作用域
$emit()函数可以接受两个参数
- name(字符串 要发生的事件的名字)
- args(集合 一个参数的集合，作为对象传递到事件监听器中。)
- 从监听器中发出的切异常都会传递到$exceptionHandler服务中
2.$broadcast事件的函数调用中是向下传递事件 其参数和$emit一样
3.$on事件的监听 on参数
- 进行监听的事件的名字
- 函数 (event ,data) data 是事件中所传递的信息 event 则是事件对象
4.事件对象的属性() 这些可以通过函数event对象进行操作
- targetScope（作用域对象）这个属性是发送或者广播事件的作用域。
- currentScope（作用域对象）这个对象包含了当前处理事件的作用域。
- name（字符串）这个字符串是触发之后，我们正在处理的事件名称。
- stopPropagation（函数）stopPropagation()函数取消通过$emit触发的事件的进一步传播。
- preventDefault（函数）preventDefault把defaultPrevented标志设置为true。尽管不能停止事件的传播，我们可以告诉子作用域无需处理这个事件（也就是说，可以安全地忽略它们）。
- defaultPrevented（布尔值） 调用preventDefault()会把defaultPrevented设置为true。
5.核心系统的$emitted事件
- $includeContentLoaded $includeContentLoaded事件当ngInclude的内容重新加载时，从ngInclude指令上触发。
- $includeContentRequested $includeContentRequested事件从调用ngInclude的作用域上发送。每次ngInclude的内容 被请求时，它都会被发送。
- $viewContentLoaded $viewContentLoaded事件每当ngView内容被重新加载时，从当前ngView作用域上发送。
6.核心系统的$broadcast事件
- $locationChangeStart 当Angular从$location服务（通过$location.path()、$location.search()等）对浏览器 的地址作更新时，会触发$locationChangeStart事件。
- $locationChangeSuccess 当且仅当浏览器的地址成功变更，又没有阻止$locationChangeStart事件的情况下，$locationChangeSuccess事件会从$rootScope上广播出来。
- $routeChangeStart 在路由变更发生之前，$routeChangeStart事件从$rootScope发送出来。也就是在路由服务开始解析路由变更所需的所有依赖项时。
- $routeChangeSuccess 在所有路由依赖项跟着$routeChangeStart 被解析之后， $routeChangeSuccess 被从$rootScope上广播出来。ngView指令使 用$routeChangeSuccess事件来获悉何时实例化控制器并渲染视图。
- $routeChangeError 如果路由对象上任意的resolve属性被拒绝了，$routeChangeError就会被触发（比如它们失 败了）。这个事件是从$rootScope上广播出来的。
- $routeUpdate 如果$routeProvider上的reloadOnSearch属性被设置成false，并且使用了控制器的同一个实例，$routeUpdate事件会被从$rootScope上广播。
- $destroy 在作用域被销毁之前，$destroy事件会在作用域上广播。这个顺序给子作用域一个机会，在父作用域被真正移除之前清理自身。
关于代码的测试
<!DOCTYPE html> <!-- 这里是初始化anglularJs 的一个应用程序 --> <html> <head> <meta charset="UTF-8"> <title>http练习</title> <script type="text/javascript" src="js/angular-1.3.0.js"></script> <style type="text/css"> div{border:1px solid #ff7300;padding:20px;margin:10px;border-radius:5px} </style> </head> <body ng-app="app"> <!-- 创建一个父级作用域 --> <div ng-controller="ParentController"> <input type="button" ng-click=‘parentCl()‘ value="点击父亲"> <div ng-controller="OneSelfController"> <input type="button" ng-click="clickeMe()" value="点击自己"/> <!-- 创建一个子级作用域 --> <div ng-controller="ChildController"> 自己的 子级作用域 </div> </div> <div ng-controller="siblingsController"> 自己的平级作用域 </div> </div> <script type="text/javascript"> var app=angular.module("app",[]); app.controller(‘OneSelfController‘,function($scope){ $scope.clickeMe=function(){ alert(‘你好‘); //向子作用域传播数据 $scope.$broadcast(‘sendChild‘,‘给子控制器传递数据‘); //向父作用域传播数据(冒泡) $scope.$emit(‘sendParent‘,‘冒泡到父元素‘) }; }); app.controller(‘ParentController‘,function($scope){ //监听$emit()事件的 $scope.$on(‘sendParent‘,function(event,data){ console.log(‘OneSelfController传递过来的数据‘,data,event.name,event); }); $scope.parentCl=function(){ //向所有子作用域传递数据 alert(‘你好‘); $scope.$broadcast(‘sendAllChild‘,‘让siblingsController接收到‘) }; }); app.controller(‘ChildController‘,function($scope){ //监听 $scope.$on(‘sendChild‘,function(event,data){ console.log(‘ChildCtrl‘,data,event.name,event); }); }) app.controller(‘siblingsController‘,function($scope){ $scope.$on(‘sendAllChild‘,function(event,data) { console.log(‘值过来吧‘, data); }); //传播不会向平级传播的 $scope.$on(‘sendParent‘, function(event,data) { alert(‘你是谁‘); console.log(‘平级得不到值‘, data); }); $scope.$on(‘sendChild‘, function(event,data) { console.log(‘平级得不到值‘, data); }); }); </script> </body> </html>
以上是关于angularjs中的事件传播$emit,$broadcast,$on的主要内容，如果未能解决你的问题，请参考以下文章
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on