要在控制器之间传递变量变化需要使用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. Centos 切换中文输入法
			
    切换输入法看起来是一个非常简单的操作,但是对于初学者来说,也并非那么简单,开始会发现按Ctrl+space无法切换中文输入法,原因是系统没有安装中文输入法,运行以下命令可以安装中文输入法: yum i ...
    
			
    2. 
						
  2. Limitations of the Lipschitz constant as a defense against adversarial examples
			
    目录 概 主要内容 Huster T., Chiang C. J. and Chadha R. Limitations of the lipschitz constant as a defense a ...
    
			
    3. 
						
  3. [opencv]计算多边形逼近曲线的长度
			
    //利用曲线逼近,计算逼近曲线的长度 //首先创建一个逼近曲线 vector<Point2f> approx; approxPolyDP(contours[i], approx, 2, t ...
    
			
    4. 
						
  4. 编写Java程序，使用Swing事件处理机制实现用户登录和英雄信息显示
			
    返回本章节 返回作业目录 需求说明: 使用Swing事件处理机制实现用户登录和英雄信息显示 实现思路: 创建LoginView类,该类用于显示登录界面,为登录按钮添加ActionListener事件, ...
    
			
    5. 
						
  5. TKE 用户故事 | 作业帮 Kubernetes 原生调度器优化实践
			
    作者 吕亚霖,2019年加入作业帮,作业帮架构研发负责人,在作业帮期间主导了云原生架构演进.推动实施容器化改造.服务治理.GO微服务框架.DevOps的落地实践. 简介 调度系统的本质是为计算服务/任 ...
    
			
    6. 
						
  6. Linux登录时，下游回显非常慢
			
    问题现象 登录linux时,远程连接正常,[root@...]回显非常慢,在执行脚本时,很容易导致命令下发错乱 原因分析 家目录下的.bash_history文件太大,导致每次登陆时读取这个文件耗时太 ...
    
			
    7. 
						
  7. python3实现阿里云发短信
			
    一.准备工作 1.安装阿里云SDK pip install aliyun-python-sdk-core-v3 2.新建签名并等待审核通过 审核通过后,记下**[签名名称](参数1)**,程序中会用到 ...
    
			
    8. 
						
  8. 在CentOS7上安装 jq
			
    安装EPEL源: yum install epel-release 安装完EPEL源后,可以查看下jq包是否存在: yum list jq 安装jq: yum -y install jq 命令参考资料 ...
    
			
    9. 
						
  9. SQL高级优化（三）之存储引擎
			
    一.MySQL数据库引擎简介 1. ISAM(indexed Sequential Access Method) ​ ISAM 是一个定义明确且历经时间考验的数据表格管理方法,它在设计之时就考虑到数据 ...
    
			
    10. 
						
  10. Javascript实现全选按钮
			
    Javascript实现全选按钮 效果:有全选选项框和单个选项框,选择全选框,所有的的选择都打上的钩,取消全选钩所有的都去掉了钩,如果取消其中某一个的钩,那么全选的钩也取消,反之全选所有的选项,那么全 ...
    
			
    11.