要在控制器之间传递变量变化需要使用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. angularJS控制器之间的相互通信方式、$broadcast、$emit、$on

    在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2) ...

  3. angularjs的事件 $broadcast and $emit and $on

    angularjs的事件 $broadcast and $emit and $on <!DOCTYPE html> <html> <head> <meta c ...

  4. 通过$broadcast或$emit在子级和父级controller之间进行值传递

    通过$broadcast或$emit在controller之间进行值传递,不过这些controller必须是子级或者父级关系, $emit只能向父级parent controller传递事件event ...

  5. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  6. Angular $broadcast和$emit和$ond实现父子通信

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  7. angular之$on、$emit、$broadcast

    1.$scope.$on view事件 //View被加载但是DOM树构建之前时: $scope.$on('$viewContentLoading', function(event, viewConf ...

  8. Angular页面传参的四种方法

    1. 基于ui-router的页面跳转传参 (1)在Angular的app.js中用ui-route定义路由,比如有两个页面, 一个页面(producers.html)放置了多个producers,点 ...

  9. 理解微信小程序Wepy框架的三个事件交互$broadcast,$emit,$invoke

    $broadcast: $broadcast事件是由父组件发起,所有子组件都会收到此广播事件,除非事件被手动取消.事件广播的顺序为广度优先搜索顺序,如上图,如果页面Page_Index发起一个$bro ...

随机推荐

  1. Windows下安装配置MySQL

    Windows下安装配置MySQL的基本步骤 一.MySQL下载 MySQL官方下载地址https://dev.mysql.com/downloads/mysql/5.7.html#downloads ...

  2. One Pixel Attack for Fooling Deep Neural Networks

    目录 概 主要内容 问题描述 Differential Evolution (DE) 实验 Su J, Vargas D V, Sakurai K, et al. One Pixel Attack f ...

  3. IOS 如何获取app更新链接 如【itms-apps://itunes.apple.com/cn/app/id1362432761?mt=8】

    这是iTunes接口地址 ,有兴趣可以看一下,我们要用到的接口如下,xxx 处换成自己 App 的 AppId ,AppId 可以在 iTunes Connect 里面看到. http://itune ...

  4. Java实习生常规技术面试题每日十题Java基础(七)

    目录 1. Java设计模式有哪些? 2.GC是什么?为什么要有GC? 3. Java中是如何支持正则表达式. 4.比较一下Java和JavaSciprt. 5.Math.round(11.5) 等于 ...

  5. Java EE数据持久化框架 • 【第5章 MyBatis代码生成器和缓存配置】

    全部章节   >>>> 本章目录 5.1 配置MyBatis Generator 5.1.1 MyBatis Generator介绍 5.1.2 MyBatis Generat ...

  6. js 鼠标经过和经过离开 导航实战案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. quasar框架在store中使用router跳转页面报错

    网上一通百度,终于在这篇博客中找到原因.  https://www.cnblogs.com/remly/p/12995936.html 原因是: 在router中导出了一个工厂函数, 既然是一个函数, ...

  8. Linux上天之路(三)之Linux系统目录

    1. Linux设计思想 1) 程序应该小而专一,程序应该尽量的小,且只专注于一件事上,不要开发那些看起来有用但是90%的情况都用不到的特性: 2) 程序不只要考虑性能, 程序的可移植性更重要,she ...

  9. 网络协议学习笔记(七)流媒体协议和P2P协议

    概述 上一篇讲解了http和https的协议的相关的知识,现在我们谈一下流媒体协议和P2P协议. 流媒体协议:如何在直播里看到美女帅哥 最近直播比较火,很多人都喜欢看直播,那一个直播系统里面都有哪些组 ...

  10. Flowable实战(七)用户和组

      在流程中,最重要的参与者是用户.流程定义了任务何时需要用户参与,什么用户可以参与.   组可以理解为我们常说的角色.   Flowable中内置了一套简单的对用户和组的支持,身份管理(IDM ID ...