在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需要在controller中通信,一般为比较简单的通信机制,告诉同伴controller我的某个你所关心的东西改变了,怎么办?如果你是一个javascript程序员你会很自然的想到异步回调响应式通信—事件机制(或消息机制)。对,这就是angularjs解决controller之间通信的机制,所推荐的唯一方式,简而言之这就是angular way。

Angularjs为在scope中为我们提供了冒泡和隧道机制,$broadcast会把事件广播给所有子controller,而$emit则会将事件冒泡传递给父controller,$on则是angularjs的事件注册函数,有了这一些我们就能很快的以angularjs的方式去解决angularjs controller之间的通信,代码如下:

View:

  1. <div ng-app="app" ng-controller="parentCtr">
  2. <div ng-controller="childCtr1">name :
  3. <input ng-model="name" type="text" ng-change="change(name);" />
  4. </div>
  5. <div ng-controller="childCtr2">Ctr1 name:
  6. <input ng-model="ctr1Name" />
  7. </div>
  8. </div>

Controller:

  1. angular.module("app", []).controller("parentCtr",
  2. function ($scope) {
  3. $scope.$on("Ctr1NameChange",
  4. function (event, msg) {
  5. console.log("parent", msg);
  6. $scope.$broadcast("Ctr1NameChangeFromParrent", msg);
  7. });
  8. }).controller("childCtr1", function ($scope) {
  9. $scope.change = function (name) {
  10. console.log("childCtr1", name);
  11. $scope.$emit("Ctr1NameChange", name);
  12. };
  13. }).controller("childCtr2", function ($scope) {
  14. $scope.$on("Ctr1NameChangeFromParrent",
  15. function (event, msg) {
  16. console.log("childCtr2", msg);
  17. $scope.ctr1Name = msg;
  18. });
  19. });

这里childCtr1的name改变会以冒泡传递给父controller,而父controller会对事件包装在广播给所有子controller,而childCtr2则注册了change事件,并改变自己。注意父controller在广播时候一定要改变事件name。

jsfiddle链接:http://jsfiddle.net/whitewolf/5JBA7/15/

本文转自 破狼 51CTO博客,原文链接:http://blog.51cto.com/whitewolfblog/1179536,如需转载请自行联系原作者

Angularjs Controller 间通信机制相关推荐

  1. 最高效的进(线)程间通信机制--eventfd

    我们常用的进程(线程)间通信机制有管道,信号,消息队列,信号量,共享内存,socket等等,其中主要作为进程(线程)间通知/等待的有管道pipe和socketpair.线程还有特别的condition ...

  2. 【SemiDrive源码分析】【X9芯片启动流程】21 - MailBox 核间通信机制介绍(代码分析篇)之 Mailbox for Linux 篇

    [SemiDrive源码分析][X9芯片启动流程]21 - MailBox 核间通信机制介绍(代码分析篇)之 Mailbox for Linux 篇 一.Mailbox for Linux 驱动框架分 ...

  3. 【SemiDrive源码分析】【X9芯片启动流程】20 - MailBox 核间通信机制介绍(代码分析篇)之 MailBox for RTOS 篇

    [SemiDrive源码分析][X9芯片启动流程]20 - MailBox 核间通信机制介绍(代码分析篇)之 MailBox for RTOS 篇 一.Mailbox for RTOS 源码分析 1. ...

  4. 【SemiDrive源码分析】【X9芯片启动流程】19 - MailBox 核间通信机制介绍(理论篇)

    [SemiDrive源码分析][X9芯片启动流程]19 - MailBox 核间通信机制介绍(理论篇) 一.核间通信 二.核间通信软件架构 三.Mailbox 设备驱动 3.1 Mailbox for ...

  5. android线程间通信的几种方法_Android线程间通信机制

    讲解Handler机制的博文很多,我也看了很多,但说实话,在我对Handler几乎不怎么了解的情况下,每一篇文章我都没太看懂,看完之后脑子里还是充满了疑问.究其原因,是因为几乎每一篇文章一上来就开始深 ...

  6. 【SemiDrive源码分析】【X9芯片启动流程】23 - MailBox 核间通信机制介绍(代码分析篇)之 RPMSG-IPCC Kernel 篇

    [SemiDrive源码分析][X9芯片启动流程]23 - MailBox 核间通信机制介绍(代码分析篇)之 RPMSG-IPCC Kernel 篇 一.RPMSG 接口 1.1 Linux Kern ...

  7. 【SemiDrive源码分析】【X9芯片启动流程】25 - MailBox 核间通信机制介绍(代码分析篇)之 RPMSG-IPCC RTOS QNX篇

    [SemiDrive源码分析][X9芯片启动流程]25 - MailBox 核间通信机制介绍(代码分析篇)之 RPMSG-IPCC RTOS & QNX篇 一.RPMSG 接口 1.1 Lin ...

  8. Android线程间通信机制

    Android线程间通信机制 当android应用程序运行时,一个主线程被创建(也称作UI线程),此线程主要负责处理UI相关的事件,由于Android采用UI单线程模型,所以只能在主线程中对UI元素进 ...

  9. Linux C编程--进程间通信(IPC)1--进程间通信机制概述

    linux下进程间通信的几种主要手段简介: 管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它 ...

最新文章

  1. 在ASP.NET中如何用C#.NET实现基于表单的验证
  2. 单链表-逆置单链表(头插法且双指针)
  3. 前后端API交互如何保证数据安全性?
  4. 后台开发经典书籍--Zookeeper分布式过程
  5. mysql单单写join_MySQL系列之Join大法
  6. websocket 带头部信息请求 header_关于websocket跨域的一个奇怪问题
  7. 八、栈的操作、栈空间
  8. 20180804的Test
  9. [HDFS Manual] CH4 HDFS High Availability Using the Quorum Journal Manager
  10. 「PPT模板」 商务UI风格
  11. spring boot controller 初始化_使用 Spring 快速创建 web 应用的两种方式
  12. mysql salve从库设置read only 属性
  13. 计算机大赛搞笑队名,电子设计大赛队名
  14. 中国虚拟人哪家强?沙利文、IDC:小冰百度商汤位列第一梯队
  15. 亚马逊aws 服务器删除_亚马逊aws服务器免费套餐及被扣款怎么办
  16. 饥荒食物 + 物品全制造代码
  17. Android Studio 使用友盟进行多渠道打包
  18. 一个关于xgen开发导入的问题,但其实我觉得更重要的是过程中发生的事情。
  19. iphone 热点 android,苹果的个人热点功能android手机能用吗
  20. 【远程文件浏览器】Unity+Lua开发调试利器

热门文章

  1. java加载一个来自项目之外的java文件,执行其main方法的一种实现方式
  2. Flutter Raw Image Provider
  3. oracle基本的查询语句,oracle 基本查询语句及实例
  4. 3说明书_电子产品说明书应该怎么翻译?知行君认为需要注意这3点
  5. 揭秘:神策数据产品矩阵,全方位筑就你的数据驱动闭环
  6. 数据分析师可不是啥好工作
  7. Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
  8. Django开发—如何重置migration
  9. WCF分布式开发必备知识(2):.Net Remoting
  10. Java异常与运行时异常,以及与线程的关系