AngularJS $on $broadcast $emit
如何在作用域之间通信呢?
1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信。
2.通过作用域中的事件处理通信。但是这种方法有一些限制;例如,你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
$broadcast、$emit事件必须依靠其他事件(ng-click等)进行触发,而不能单纯写一个这个。。
$on倒是可以直接写,因为它属于监听和接收数据的。
$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="click()">click me</a>
<div ng-controller="ChildCtrl"></div> <!--子级-->
</div>
<div ng-controller="BroCtrl"></div> <!--平级-->
</div>
js代码
app.controller('SelfCtrl', function($scope) {
$scope.click = function () {
$scope.$broadcast('to-child', 'child');
$scope.$emit('to-parent', 'parent');
}
});
app.controller('ParentCtrl', function($scope) {
$scope.$on('to-parent', function(event,data) {
console.log('ParentCtrl', data); //父级能得到值
});
$scope.$on('to-child', function(event,data) {
console.log('ParentCtrl', data); //子级得不到值
});
});
app.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(event,data) {
console.log('ChildCtrl', data); //子级能得到值
});
$scope.$on('to-parent', function(event,data) {
console.log('ChildCtrl', data); //父级得不到值
});
});
app.controller('BroCtrl', function($scope){
$scope.$on('to-parent', function(event,data) {
console.log('BroCtrl', data); //平级得不到值
});
$scope.$on('to-child', function(event,data) {
console.log('BroCtrl', data); //平级得不到值
});
});
$emit和$broadcast可以传多个参数,$on也可以接收多个参数。
$on的方法中的event事件参数:
event.name 事件名称
event.targetScope 发出或者传播原始事件的作用域
event.currentScope 目前正在处理的事件的作用域
event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用$emit发出的事件)
event.preventDefault() 这个方法实际上不会做什么事,但是会设置defaultPrevented为true。直到事件监听器的实现者采取行动之前它才会检查defaultPrevented的值。
event.defaultPrevented 如果调用了preventDefault则为true
AngularJS $on $broadcast $emit的更多相关文章
- angularjs的$on、$emit、$broadcast
如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...
- Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...
- AngularJS的学习--$on、$emit和$broadcast的使用
AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$ro ...
- angularJs--$on、$emit和$broadcast的使用
$emit只能向parent controller传递event与data $broadcast只能向child controller传递event与data $on用于接收event与data 例子 ...
- Angularjs总结(四)$on、$emit和$broadcast的使用
开发中有时候会需要控制器之间的传值操作:下面几个操作可以达到所需, 注:无平级之间的操作 $emit只能向父 controller传递event与data$broadcast只能向子 controll ...
- Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on
$emit只能向parent controller传递event与data( $emit(name, args) ) $broadcast只能向child controller传递event与data ...
- angularJS 系列(六)---$emit(), $on(), $broadcast()的使用
下面以一个例子来讲述 angular 中的event system,有$emit(), $on(), $broadcast().效果图如下 下面的代码中,用到了 controller AS 的语法,具 ...
- dispatch emit broadcast
1.broadcast 事件广播 遍历寻找所有子孙组件,假如子孙组件和componentName组件名称相同的话,则触发$emit的事件方法,数据为 params. 如果没有找到 则使用递归的方式 继 ...
- AngularJS 事件广播与接收 $emit $broadcast $on
AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...
- $scope绑定事件之$on方法和$emit,$broadcast
function DemoCtrl($scope){ $scope.count = 0; $scope.$on('myevent',function(){ $scope.count++; }) } 视 ...
随机推荐
- NgNice项目案例
技术构架: 服务端技术:NodeJS + Express4.x + Mongodb + Mongoose 前端技术: AngularJS1.2.x + Bootstrap3.x 源码:https:// ...
- UITapGestureRecognizer会屏蔽掉Button的点击事件( 转载)
UITapGestureRecognis 前几天在做项目的时候,遇到这个一个问题,在一个视图也就是UIView上添加一个手势,然后又在这个View上添加一个UIButton,然后给按钮添加事件,运行项 ...
- JavaScript HTML DOM
JavaScript HTML DOM 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象 ...
- java——输入流FileInputStream
写一个简单的程序,实现从电脑中的一个盘里的文件中往程序中输入内容. package com.liaojianya.chapter5; import java.io.FileInputStream; i ...
- 2016.7.16equals的使用(一)
class V{ private int a; V(int a){ rhis a=a; } public boolean equals(int a,int b){ if(this.a equals( ...
- IE6双倍margin间距解决方案
问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px. 解决 ...
- 使用require.js时,解决AMD封装jquery1.4.1的问题。
require.config({ baseUrl: "js/", paths: { "jquery": "jquery-1.4.1.min" ...
- 脚本学习python和linux-shell和jQuery(javascript)
使用脚本可以方便管理,使用计算机. 打算学脚本来更好地用计算机系统,特别是Linux. 学python因为它开源,而且是C家族的语言,本来也是课程需要,再加上它确实很好,所以非常主打,之前看过perl ...
- JQUERY1.9学习笔记 之可见性过滤器(二) 可见选择器
描述:选择所有可见的元素. 例:点击时让所有的可见的div元素变黄. <!doctype html><html lang="en"> <head> ...
- dede定义全局变量(include/common.inc.php)及调用方式
dede定义全局变量的文件include/common.inc.php及使用 在include/common.inc.php文件里,dede定义了大量的全局变量,详细自己去看看 dede模板里 ...