要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递，同时使用$on来接收事件并作出响应。

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>

上述代码使用$watch监听parent的值的变化，当发生变化时就会“广播”出parentChange事件并传递了参数（输入框的值），此时子元素作用域中使用了$scope.$on("parentChange, handler)" 来接收parentChange事件，然后接受输入框的值并赋值给子作用域中的child变量。 这样就完成了值的传递。

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>

当子元素的child值发生变化时，会向上级发出childChange事件，此时父元素正在监听的$on(“childChange”)会做出响应，将传递的参数赋值给parent，整个流程与 broadcast类似。

上述作用域均存在层级关系，如果对于同级的作用域该如何做呢？

我们可以使用服务来广播事件：

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

我们在服务中运用了$rootScope，所有的作用域都从属于它，基于这点，我们可以在根作用域中广播事件，$rootScope.$broadcast("valueChange", n);，当每个子作用域中的值发生变化时我们都会调用服务中的change 方法来广播这个事件，同时每个作用域又都在监听$on("valueChange") 事件并作出相应处理，这样就实现了子作用域中的值会传递给兄弟作用域了。

更多参考： 
http://brandonclapp.com/using-angularjs-services-to-broadcast-messages-between-controllers/ 
http://www.codelord.net/2015/05/04/angularjs-notifying-about-changes-from-services-to-controllers/

												


											
Angular中$broadcast和$emit的使用方法的更多相关文章
	

    
								
  1. angular之$broadcast、$emit、$on传值
		
    文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta  ...
    
		
    2. 
						
  2. angularJS控制器之间的相互通信方式、$broadcast、$emit、$on
		
    在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2) ...
    
		
    3. 
						
  3. angularjs的事件 $broadcast and $emit and $on
		
    angularjs的事件 $broadcast and $emit and $on <!DOCTYPE html> <html> <head> <meta c ...
    
		
    4. 
						
  4. 通过$broadcast或$emit在子级和父级controller之间进行值传递
		
    通过$broadcast或$emit在controller之间进行值传递,不过这些controller必须是子级或者父级关系, $emit只能向父级parent controller传递事件event ...
    
		
    5. 
						
  5. Angular.js中处理页面闪烁的方法详解
		
    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...
    
		
    6. 
						
  6. Angular  $broadcast和$emit和$ond实现父子通信
		
    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta  ...
    
		
    7. 
						
  7. angular之$on、$emit、$broadcast
		
    1.$scope.$on view事件 //View被加载但是DOM树构建之前时: $scope.$on('$viewContentLoading', function(event, viewConf ...
    
		
    8. 
						
  8. Angular页面传参的四种方法
		
    1. 基于ui-router的页面跳转传参 (1)在Angular的app.js中用ui-route定义路由,比如有两个页面, 一个页面(producers.html)放置了多个producers,点 ...
    
		
    9. 
						
  9. 理解微信小程序Wepy框架的三个事件交互$broadcast，$emit，$invoke
		
    $broadcast: $broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序,如上图,如果页面Page_Index发起一个$bro ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Robust Pre-Training by Adversarial Contrastive Learning
			
    目录 概 主要内容 代码 Jiang Z., Chen T., Chen T. & Wang Z. Robust Pre-Training by Adversarial Contrastive ...
    
			
    2. 
						
  2. Entropy, relative entropy and mutual information
			
    目录 Entropy Joint Entropy Conditional Entropy Chain rule Mutual Information Relative Entropy Chain Ru ...
    
			
    3. 
						
  3. 剖析Defi之Uinswap_1
			
    学习UniswapERC20,它是交易对的父合约.UniswapV2ERC20 是流动性代币合约,也称为 LP Token.功能主要实习ERC20代币功能以及对线下签名授权. 1 pragma sol ...
    
			
    4. 
						
  4. Java Web程序设计笔记  • 【第2章 JSP基础】
			
    全部章节   >>>> 本章目录 2.1 JSP 简介 2.1.1 JSP 概述 2.1.2 开发第一个 JSP 页面 2.1.3 JSP 处理流程 2.1.4 实践练习 2. ...
    
			
    5. 
						
  5. MySQL基础操作指南
			
    启动停止MySQL服务 1.Windows服务窗口启动:开始 → 运行 → services.msc → 找到MySQL 56服务 2.MySQL命令启动:开始 → 运行 → 管理员权限运行cmd → ...
    
			
    6. 
						
  6. Java程序设计基础笔记 • 【目录】
			
    持续更新中- 我的大学笔记>>> 章节 内容 实践练习 Java程序设计基础作业目录(作业笔记) 第1章 Java程序设计基础笔记 • [第1章 初识Java] 第2章 Java程序 ...
    
			
    7. 
						
  7. 如何下载安装JDBC_jar包，MySQL_JDBC_jar包的下载与使用（Windows）
			
    一. 下载 (1) 打开MySQL_JDBC的下载网站:https://dev.mysql.com/downloads/connector/j/ (2) 选择操作系统:Platform Indepen ...
    
			
    8. 
						
  8. 编写Java程序，创建一个数学工具类，将该类设计为final类，Final 修饰符的使用。
			
    返回本章节 返回作业目录 需求说明: 创建一个数学工具类. 将该类设计为final类. 将该类的构造方法的访问权限定义为私有,以防止外界实例化该类. 在该类定义静态double类型常量π,其值为3.1 ...
    
			
    9. 
						
  9. 解决windows update失败，正在还原的问题
			
    其实这个不算问题,等上几个小时,还原完毕就好了,不过也有快速解决的办法. 所需工具:U盘.光盘等可以进入PE系统的工具,dism++软件 1.下载dism++工具,根据你的系统,选择使用32位还是64 ...
    
			
    10. 
						
  10. centos6.5-DNS搭建
			
    在RHEL6.5中,系统光盘自带了BIND服务的安装文件 安装步骤 准备工作: Service iptables stop    #关闭防火墙    Setenforce 0    关闭selinux ...
    
			
    11.