Angularjs Controller间通信的几种方法
先说最简单的,适合简单数据
一、使用controller as
<body ng-controller="ParentCtrl as parent">
<input ng-model="parent.name" /> {{parent.name}}
<div ng-controller="ChildCtrl as child">
<input ng-model="child.name" /> {{child.name}} - {{parent.name}}
</div>
</body>
这样parentCtrl中的数据也可以显示在嵌套在其中的childCtrl了
二、使用$rootScope 或 $parent
<body ng-controller="ParentCtrl">
<input ng-model="name" /> {{name}}
<div ng-controller="ChildCtrl">
<input ng-model="name" /> {{name}} - {{$parent.name}}
</div>
</body>
三、使用$broadcast,$emit和$on
- 从上往下—— $broadcast 把事件广播给所有子controller
- 从下往上—— $emit 将事件冒泡传递给父controller
- $on —— angularjs的事件注册函数
<div ng-app="app" ng-controller="parentCtrl">
<div ng-controller="childCtrl1">name :
<input ng-model="name" type="text" ng-change="change(name);" />
</div>
<div ng-controller="childCtrl2">Ctr1 name:
<input ng-model="ctrl1Name" />
</div>
</div>
angular.module("app", []).controller("parentCtrl",function ($scope) {
//注册Ctrl1NameChange事件
$scope.$on("Ctrl1NameChange", function (event, msg) {
console.log("parent", msg);
$scope.$broadcast("Ctrl1NameChangeFromParent", msg);
});
}).controller("childCtrl1", function ($scope) {
$scope.change = function (name) {
console.log("childCtrl1", name);
//冒泡Ctrl1NameChange事件,将name传给父级controller
$scope.$emit("Ctrl1NameChange", name);
};
}).controller("childCtrl2", function ($scope) {
//
$scope.$on("Ctrl1NameChangeFromParent",function (event, msg) {
console.log("childCtrl2", msg);
$scope.ctrl1Name = msg;
});
});
jsfiddle链接:http://jsfiddle.net/whitewolf/5JBA7/15/
参看:
- http://www.cnblogs.com/whitewolf/archive/2013/04/16/3024843.html
- http://stackoverflow.com/questions/21287794/angularjs-controller-as-syntax-clarification
Angularjs Controller间通信的几种方法的更多相关文章
- vue-learning:31 - component - 组件间通信的6种方法
vue组件间通信的6种方法 父子组件通信 prop / $emit 嵌套组件 $attrs / $liteners 后代组件通信 provide / inject 组件实例引用 $root / $pa ...
- Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- 【转】Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- Linux下进程通信的八种方法
Linux下进程通信的八种方法:管道(pipe),命名管道(FIFO),内存映射(mapped memeory),消息队列(message queue),共享内存(shared memory),信号量 ...
- Shell实现Unix进程间信息交换的几种方法
本文将介绍在SCO OpenServer5.0.5系统中使用shell语言来实现进程间信息交换的几种方法: 使用命名管道实现进程间信息交换 使用kill命令和trap语句实现进程间信息交换 使用点命令 ...
- 去除inline-block元素间间距的N种方法-zhangxinxu
张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...
- c#中实现串口通信的几种方法
c#中实现串口通信的几种方法 通常,在C#中实现串口通信,我们有四种方法: 第一:通过MSCOMM控件这是最简单的,最方便的方法.可功能上很难做到控制自如,同时这个控件并不是系统本身所带,所以还得注册 ...
- UE4学习心得:蓝图间信息通信的几种方法
蓝图间通信是一个复杂关卡能否正常运行的关键,笔者在这里提供几种蓝图类之间的信息交互方法,希望能对读者有所帮助. 1.类引用 这是最直接的一种蓝图类之间的信息交互方式.首先在Editor中创建2个Act ...
- 容器间通信的三种方式 - 每天5分钟玩转 Docker 容器技术(35)
容器之间可通过 IP,Docker DNS Server 或 joined 容器三种方式通信. IP 通信 从上一节的例子可以得出这样一个结论:两个容器要能通信,必须要有属于同一个网络的网卡. 满足这 ...
随机推荐
- python:字符串转换成字节的三种方式
str='zifuchuang' 第一种 b'zifuchuang'第二种bytes('zifuchuang',encoding='utf-8')第三种('zifuchuang').encode('u ...
- javascript的sort()方法
定义和用法: sort() 方法用于对数组的元素进行排序. 语法: 1 arrayObject.sort(sortby) 描述: sortby 可选.必须是函数.规定排序顺序 . 返回值: 对 ...
- (4) 二叉平衡树, AVL树
1.为什么要有平衡二叉树? 上一节我们讲了一般的二叉查找树, 其期望深度为O(log2n), 其各操作的时间复杂度O(log2n)同时也是由此决定的.但是在某些情况下(如在插入的序列是有序的时候), ...
- 公钥私钥和RSA算法
1, RSA算法原理(一) http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html 2, RSA算法原理(二) http: ...
- getFragmentManager()和getSupportFragmentManager()
在Android开发中,少不了Fragment的运用.目前在实际运用中,有v-4包下支持的Fragment以及app包下的Fragment,这两个包下的FragmentManager获取方式有点区别, ...
- 客户端实现蓝牙接收(C#)
知识总结发布 (转载) 网上有关蓝牙接收的资料很多,使用起来也很简单,但是我觉得还是有必要把这些知识总结下来,蓝牙开发需要用到一个第三方的库InTheHand.Net.Personal.dll,感兴 ...
- struts2漏洞集合
[+]1 S2-005 CVE-2010-1870 CVE-2010-1870 影响版本:Struts 2.0.0 – Struts 2.1.8.1 官方公告:http://struts.apache ...
- Sprint(第十二天11.25)
- 安卓CPU性能测试
步骤1.adb shell (进入linux的底层) 步骤2.echo 3>/proc/sys/vm/drop_caches(清除系统cache) 步骤3.top -d 1|grep com ...
- 16个基本颜色关键字 Basic color keywords
16个基本颜色关键字 Basic color keywords Color Color Name HEX RGB black #000000 0,0,0 silver #C0C0C0 192, ...