angularJS控制器之间的相互通信方式、$broadcast、$emit、$on
在项目中，我们可能会很经常性的利用到控制器之间的相互通信，在angular中的控制器之间的相互通信有以下几种方式：
1）通过本地数据的存储localstorage,sessionstorage,
2）通过rootScope，顶级作用域
3）通过$broadcast,$on,$emit的方式进行通信
在此就讲解下如何通过第三种方式进行通信的问题：
$broadcast：顾名思义是广播的意思，一般用于父级控制器向子控制器传递信息的方法。
$emit：主要是用于子控制器向父控制器传递信息的方法。
$on：用于接收$broadcast,$emit的消息
情况一：父---->子之间的通信（$broadcast）
<script src="../angular.js"></script>
<script>
angular.module("app", [])
.controller("child", function($scope) {
$scope.$on("parentChange", function(e, m) {//参数一：监听的事件名，回调函数的参数一：以对象的形式返回相关数据，参数二：你传递的参数
$scope.change = "changed";
$scope.child = m;
})
})
.controller("parent", function($scope) {
$scope.$watch("parent", function(n, o) {
if (n == o) {
return;
}
$scope.$broadcast("parentChange", n)
})
})
</script> <body>
<div ng-controller="parent">
Parent: {{parent}}
<input type="text" ng-model="parent"> <div ng-controller="child">
{{change}} Child: {{child}}
</div>
</div>
</body>
情况二：子--->父的通信 ($emit)
<script src="../angular.js"></script>
<script>
angular.module("app", [])
.controller("parent", function($scope) {
$scope.$on("childChange", function(e, m) {
$scope.change = "changed";
$scope.parent = m
})
})
.controller("child", function($scope) {
$scope.$watch("child", function(n, o) {
if (n == o) {
return;
}
$scope.$emit("childChange", n)
})
})
</script> <body ng-controller="parent">
{{change}} Parent: {{parent}}
<div ng-controller="child">
Child: {{child}}
<input type="text" ng-model="child">
</div>
</body>
第三种：同级的兄弟控制器之间的相互通信（要额外定义一个服务）
<script src="../angular.js"></script>
<script>
angular.module("app", [])
.service("myServive", function($rootScope) {
return {
change: function(n) {
$rootScope.$broadcast("valueChange", n); }
}
})
.controller("bro1", function($scope, myServive) {
$scope.$watch("value1", function(n) {
myServive.change(n);
}) $scope.$on("valueChange", function(e, m) {
console.log("value1");
$scope.value1 = m;
})
})
.controller("bro2", function($scope, myServive) {
$scope.$watch("value2", function(n) {
myServive.change(n);
}) $scope.$on("valueChange", function(e, m) {
console.log("value2");
$scope.value2 = m;
})
})
</script> <body>
<div ng-controller="bro1">
<h3> value1:</h3>
<input type="text" ng-model="value1">
</div>
<div ng-controller="bro2">
<h3>value2:</h3>
<input type="text" ng-model="value2">
</div>
</body>
同级控制器之间的相互通信，比起前面两种情况确实来的稍微复杂一点，但是本质上还是利用的上一级的控制器进行通信（以服务的方式）
写这篇文章的原因就是在我的项目中我遇到了一个需求：我的页面中会用到angular-bootstrap的模态弹出框，现在要求模态框是没用内容的，通过z-index设置页面的内容（而非模态框）让其浮现到模态框上面（他有两个按钮），通过点击这两个按钮让模态框消失（已经设置模态框的backdtop:'static'）,【之前都是点击模态框“确认”，“取消”按钮才消失模态框】，现在是通过点击页面的上的两个按钮（与模态框没有联系）让它消失。
这个时候就需要通过同级控制器之间的相互通信。
angularJS控制器之间的相互通信方式、$broadcast、$emit、$on的更多相关文章
- angularjs控制器之间的数据共享与通信
1.可以写一个service服务,从而达到数据和代码的共享; var app=angular.module('app',[]); app.service('ObjectService', [Objec ...
- angularjs控制器之间通信，事件通知服务
service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...
- 《AngularJS》--指令的相互调用
转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...
- AngularJS中控制器之间通信方法
在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...
- angularjs 控制器、作用域、广播详解
一.控制器 首先列出几种我们平常使用控制器时的几种误区: 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,但这种实现方式存在的问题是: 如果视图1和视图2根本没有任何逻辑关系,这样& ...
- AngularJS 控制器通信
指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是通过scope的继承 ...
- angularJS--多个控制器之间的数据共享
为了在控制器之间共享数据,需要在服务中添加一个用来储存用户名的方法.记住,服务在 应用的生命周期内是单例模式的,因此可以将用户名安全地储存在其中. <!DOCTYPE html> < ...
- AngularJS 1.x系列：AngularJS控制器（3）
1. 控制器(Controller)定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ...
- angular开发控制器之间的通信
一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...
随机推荐
- 河南省多校联盟二-A
1279: 简单的背包问题 时间限制: 1 秒 内存限制: 32 MB提交: 361 解决: 20 题目描述 相信大家都学过背包问题了吧,那么现在我就考大家一个问题.有n个物品,每个物品有它的重量 ...
- C#/JAVA 程序员转GO/GOLANG程序员笔记大全（DAY 02）
------------------- 指针 go 保留的 c 语言指针的操作,同时增加了自动垃圾回收机制 var a = new(int) *a = // &a 内存地址 --------- ...
- 发送垃圾邮件的僵尸网络——药物（多）、赌博、股票债券等广告+钓鱼邮件、恶意下载链接、勒索软件+推广加密货币、垃圾股票、色情网站（带宏的office文件、pdf等附件）
卡巴斯基实验室<2017年Q2垃圾邮件与网络钓鱼分析报告> 米雪儿 2017-09-07 from:http://www.freebuf.com/articles/network/1465 ...
- 【hive】在alter修改元数据的时候报错 mismatched input 'xxxxx' expecting KW_EXCHANGE
目的:修改表某个字段属性 语句: 报错信息 错误原因: 在HiveQL中,alter命令不使用与create或select相同的语义 ; 具体来说,您不能使用“ALTER DATABASE.TABLE ...
- Tree各种遍历实现
数据结构.算法及应用 张宪超主编 科学出版社 1. 数据结构的基本概念知识 数据结构的逻辑结构由数据节点和连接两个节点的边组成. 数据节点的数据类型:整型,实数型,布尔型,字符型,指针数据类型 结构的 ...
- C++进阶2. typedef用法
C++ 中的typedef用法 20131011 Typedef在C++中是一个关键字,他的用法有多重,但是自己又说不全面,所以整理一下: 1.用类型的别名 typedef char* PChar; ...
- LeetCode OJ：Range Sum Query 2D - Immutable（区域和2D版本）
Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper lef ...
- 【linux】VirtualBox-“please use a kernel appropriate for your cpu”
This kernel requires the following features not present on the CPU:paeUnable to boot – please use a ...
- 下拉列表框DropDownList绑定Dictionary泛型类
DropDownList绑定Dictionary泛型类 定义一个Dictionary泛型类 /// <summary> /// 产品类型 /// </summary> ...
- Spring AOP的使用报错！
用构造方法注入的时候 需要把无参构造方法手动加上 AOP底层会调用无参构造方法. 不加则报错:Superclass has no null constructors but no arguments ...