$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。

  • $emit只能向parent controller传递event与data
  • $broadcast只能向child controller传递event与data
  • $on用于接收event与data

例如:

<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>

  

app.controller('SelfCtrl', function($scope) {
$scope.click = function () {
$scope.$broadcast('to-child', '我传给子控制器的数据');
$scope.$emit('to-parent', '我传给父控制器的数据');
}
}); app.controller('ParentCtrl', function($scope) {
$scope.$on('to-parent', function(event,data) { //监听to-parent
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); //平级得不到值
});
});

  

最终结果

ParentCtrl  我传给父控制器的数据

ChildCtrl     我传给子控制器的数据

备注:当然service也可以在不同controller中通信

angularjs中控制器之间的通信----$on、$emit和$broadcast解析的更多相关文章

  1. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  2. AngularJS中控制器之间通信方法

    在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...

  3. angularJS中控制器和作用范围

    $scope是$rootScope的子作用域控制对象,$rootScope的id为1,其他的为2,3,4... 不同的控制器之间,所对应的作用域控制对象$scope,之间是相互隔离的,如果要共享数据, ...

  4. angular开发控制器之间的通信

    一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...

  5. AngularJs开发——控制器间的通信

    AngularJs开发——控制器间的通信 指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制 ...

  6. angular中控制器之间传递参数的方式

    在angular中,每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其 ...

  7. angular 控制器之间的通信

    1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...

  8. angular中控制器之间的通讯方式

    1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...

  9. AngularJS中控制器继承

    本篇关注AngularJS中的控制器继承,了解属性和方法是如何被继承的. 嵌套控制器中属性是如何被继承的? ==属性值是字符串 myApp.controller("ParentCtrl&qu ...

随机推荐

  1. icon-font 字体图标的引用

    1.font-class引用 font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题. 与unicode使用方式相比,具有如下特点: 兼容性良好, ...

  2. AMD,CMD,UMD 三种模块规范 写法格式

    一下三块均以 foo.js 为示例文件名,以 jQuery,underscore 为需求组件 ADM:异步模块规范, RequireJs 的支持格式 // 文件名: foo.js define(['j ...

  3. Linux系统下安装Gitlab

    Linux系统下安装Gitlab 一.简介 GitLab是利用 Ruby on Rails 一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目.它拥有与 ...

  4. atom 常用配置

    基本配置 setting 位于 File -> setting 显示HTML标签闭合的竖线 Setting -> Editor Setting -> 勾选 Show Indent G ...

  5. [python错误]UnicodeDecodeError: 'gbk' codec can't decode byte...

    出现此错误的原因是使用'gbk'解码时报错,存在一些字符不能使用gbk来解码. 首先,简体中文字符编码(ASCII扩展字符集)有下列几种:GB2312.GBK.GB18030. GB2312: 中国国 ...

  6. linux开机启动脚本

    linux开机启动脚本 linux 开机启动脚本 用户自定义开机程序(/etc/rc.d/rc.local) 操作最简单,方便.每次都自己启动PHP啊,Nginx啊 烦死了,其他方式还要弄shell啊 ...

  7. C++ 的编译过程

    Recall that g++ is not actually the C++ compiler – it is a driver program that hides a lot of the co ...

  8. ZT北大青鸟营业额超20亿到不值一提 衰落的背后

    北大青鸟营业额超20亿到不值一提 衰落的背后 2013-10-18 08:18 王根旺  我要评论 (0) “北大青鸟是个悲剧!”说到曾经的IT培训业巨头,黑马导师.珍品网创始人曹允东惋惜道.在学大创 ...

  9. 为什么S/4HANA的生产订单创建后会自动release

    在S/4HANA系统里我们观察到通过函数CO_61_ORDER_EDIT创建的生产订单会自动释放Release: 通过第86行的IF语句的条件检测不难找到原因. 变量PROFILE_TMP的类型为TC ...

  10. linux-记录

    查看运行的进程  ps -aux|grep java 找到要删除的进程的编号 杀死进程  kill -9 1883(进程编号) 重启服务 sh satrtBussinessService.sh