Angularjs Controller 间通信机制
在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
5 function (event, msg) {
6 console.log("parent", msg);
7 $scope.$broadcast("Ctr1NameChangeFromParrent", msg);
8 });
9 }).controller("childCtr1", function ($scope) {
10 $scope.change = function (name) {
11 console.log("childCtr1", name);
12 $scope.$emit("Ctr1NameChange", name);
13 };
14 }).controller("childCtr2", function ($scope) {
15 $scope.$on("Ctr1NameChangeFromParrent",
16
17 function (event, msg) {
18 console.log("childCtr2", msg);
19 $scope.ctr1Name = msg;
20 });
21 });
这里childCtr1的name改变会以冒泡传递给父controller,而父controller会对事件包装在广播给所有子controller,而childCtr2则注册了change事件,并改变自己。注意父controller在广播时候一定要改变事件name。
jsfiddle链接:http://jsfiddle.net/whitewolf/5JBA7/15/
Angularjs Controller 间通信机制的更多相关文章
- 【转】Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- Angularjs Controller间通信的几种方法
先说最简单的,适合简单数据 一.使用controller as <body ng-controller="ParentCtrl as parent"> <inpu ...
- Android线程间通信机制——深入理解 Looper、Handler、Message
在Android中,经常使用Handler来实现线程间通信,必然要理解Looper , Handler , Message和MessageQueue的使用和原理,下面说一下Looper , Handl ...
- 进程间通信机制(管道、信号、共享内存/信号量/消息队列)、线程间通信机制(互斥锁、条件变量、posix匿名信号量)
注:本分类下文章大多整理自<深入分析linux内核源代码>一书,另有参考其他一些资料如<linux内核完全剖析>.<linux c 编程一站式学习>等,只是为了更好 ...
- angularJS项目-ajax事件的按钮loading和页面loading状态 & Controller之间通信-待续
1).按钮loading --TODO 2). page loading状态 1.在module中注入指令 // Route State Load Spinner(used on page or co ...
- ucos实时操作系统学习笔记——任务间通信(信号量)
ucos实时操作系统的任务间通信有好多种,本人主要学习了sem, mutex, queue, messagebox这四种.系统内核代码中,这几种任务间通信机制的实现机制相似,接下来记录一下本人对核心代 ...
- Java——线程间通信
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- linux高级编程基础系列:线程间通信
linux高级编程基础系列:线程间通信 转载:原文地址http://blog.163.com/jimking_2010/blog/static/1716015352013102510748824/ 线 ...
- 【DSP开发】硬件信号量在多核处理器核间通信中的应用
硬件信号量在多核处理器核间通信中的应用 刘德保1,汪安民1,韩道文2 1.同方电子科技有限公司研究所,九江 332009:2.解放军电子工程学院 摘要: 在多核处理器的软件设计中,核间通信机制是关键所 ...
随机推荐
- 机器学习(1)_R与神经网络之Neuralnet包
本篇博客将会介绍R中的一个神经网络算法包:Neuralnet,通过模拟一组数据,展现其在R中是如何使用,以及如何训练和预测.在介绍Neuranet之前,我们先简单介绍一下神经网络算法. 人工神经网络( ...
- Java正则表达式获取网页所有网址和链接文字
; pos1= urlContent.indexOf(strAreaBegin)+strAreaBegin.length(); pos2=urlContent.inde ...
- Python学习第二天数组
1:Python定义数组:a=[0,1,2,3,4] ; 打印数组list(a); 这时:a[0]=0, a[1]=1, a[[2]=2...... 1.1:如果想定义一个很长的数组可以用到pyt ...
- Visual Studio Profiler 跟踪检查每个exe dll 性能 执行时间 CPU占用情况的方法
- shell's glob
[shell's glob] basic glob example: range glob example: 参考: http://bash.cumulonim.biz/glob.html
- 应用dom4j读取xml的例子
1. 样例xml <?xml version="1.0" encoding="UTF-8"?> <students> <stude ...
- HDU 1394Minimum Inversion Number(线段树)
题目大意是说给你一个数组(N个),没戏可以将其首部的k(k<N)个元素移动至尾部,这样总共会形成N个序列 现在要求这n个序列中逆序对数最少的那一个序列有多少个逆序对 最初的确是没太多思路,就算知 ...
- HDU3466Proud Merchants(贪心&背包)
http://acm.hdu.edu.cn/showproblem.php?pid=3466 题目大意是说n个物品每个物品的花费是p,但是如果你现在的钱少于q就买不了这个物品,每个物品的价值是v,求有 ...
- Oracle数据库编程:在JDBC中应用Oracle
9.在JDBC中应用Oracle: JDBC访问数据库基本步骤: 1.加载驱动 2.获取链接对象 3.创建SQL语句 4.提交S ...
- JPBM4.4基础及数据库说明
JPBM4.4基础及数据库说明 对jBPM4.4数据库的几张表简单介绍: A.资源库和运行时表结构 JBPM4_DEPLOYMENT 流程定义表 ...