AngularJS中Scope间通讯Demo
在AngularJS中，每一个controller都有对应的Scope，而Scope间有时候需要通讯。比如有如下的一个controller嵌套：
<body ng-controller="AppCtrl">
<table ng-controller = "ProductCtrl">
...
<tr ng-repeat="product in products">
<td>{{$index + 1}}</td>
<td>{{product.name}}</td>
<td>{{product.price | currency }}</td>
<td><button ng-click="addToCart(product)">添加到购物车</button></td>
</tr>
</table>
<div ng-controller="CartCtrl">
...
<tr ng-repeat="product in cart">
<td>{{$index+1}}</td>
<td>{{product.name}}</td>
<td>{{product.price | currency}}</td>
<td><button ng-click="removeFromCart(product)">remove</button></td>
</tr>
</div>
</body>
对应的controller部分大致是：
myApp.controller("AppCtrl", function($scope){
$scope.title = "Product Manager";
})
myApp.controller("ProductCtrl", function($scope){
$scope.products = [
{name:"", price:50},
...
];
$scope.addToCart = function(){
}
});
myApp.controller("CartCtrl", function($scope){
$scope.cart = [];
$scope.removeFromCart = function(product){
}
});
以上，呈现出的Scope间的关系如下：
$rootScope
.....$scope of AppCtrl
..........$scope of ProductCtrl
..........$scope of CartCtrl
问题来了，ProductCtrl中需要把product放到cart中，cart中需要获取到product，两者之间如何通讯呢？
→ 当在ProductCtrl中执行addToCart动作时，让$rootScope发一个广播，通知所有的子Scope
myApp.controller("ProductCtrl", function($scope, $rootScope){
$scope.products = [
{name:"", price:50},
...
];
$scope.addToCart = function(product){
//让$rootScope发一个广播，所有子scope都知道了
$rootScope.$broadcast("addProduct", product);
}
})
可见，$rootScope通过$broadcast方法广播事件，一个实参是事件名称，一个实参是要传递的对象。
→ 在CartCtrl中需要侦听来自$rootScope的事件，同时要把移除product的事件告知更高级别的Scope
myApp.controller("CartCtrl", function($scope){
$scope.cart = [];
//子scope要侦听rootScope的事件
$scope.$on("addProduct", add);
function add(evt, product){
$scope.cart.push(product);
}
$scope.removeFromCart = function(product){
//子scope中的事件告知更高的scope
$scope.$emit("removeProduct", product);
}
})
可见，在子$scope中通过$on方法侦听来自$rootScope的addProduct事件，并执行一个回调函数；如果在子$Scope中执行一个事件要告知更高级别的Scope，这里是removeFromCart事件，需要通过$emit方法，其中第一个实参也是事件名称，第二个实参是传递对象。
→ 在AppCtrl中针对来自CartCtrl中的removeProduct事件
myApp.controller("AppCtrl", function($scope){
$scope.$on("removeProduct", function(evt, data){
console.log(data.name + "removed");
})
})
可见，也是通过$on方法侦听子$scope中emit发出的事件。
AngularJS中Scope间通讯Demo的更多相关文章
- AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系
Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁 ...
- AngularJS中Directive间交互实现合成
假设需要烹饪一道菜肴,有3种原料,可以同时使用所有的3种原料,可以使用其中2种,也可以使用其中1种. 如果以Directive的写法,大致是:<bread material1 material2 ...
- python中进程间通讯——文件锁之fcntl模块的使用
python 中给文件加锁——fcntl模块import fcntl 打开一个文件##当前目录下test文件要先存在,如果不存在会报错.或者以写的方式打开f = open('./test')对该文件加 ...
- 转深入理解 AngularJS 的 Scope作用域
文章转载英文:what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs 中文:http://www. ...
- 一步步构建自己的AngularJS(2)——scope之$watch及$digest
在上一节项目初始化中,我们最终得到了一个可以运行的基础代码库,它的基本结构如下: 其中node_modules文件夹存放项目中的第三方依赖模块,src存放我们的项目代码源文件,test存放测试用例文件 ...
- Android查缺补漏（IPC篇）-- 进程间通讯基础知识热身
本文作者:CodingBlock 文章链接:http://www.cnblogs.com/codingblock/p/8479282.html 在Android中进程间通信是比较难的一部分,同时又非常 ...
- 一篇文章了解相见恨晚的 Android Binder 进程间通讯机制【转】
本文转载自:https://blog.csdn.net/freekiteyu/article/details/70082302 Android-Binder进程间通讯机制 概述 最近在学习Binder ...
- Android Binder 进程间通讯机制梳理
什么是 Binder ? Binder是Android系统中进程间通讯(IPC)的一种方式,也是Android系统中最重要的特性之一.Binder的设计采用了面向对象的思想,在Binder通信模型的四 ...
- AngularJS中实现无限级联动菜单（使用demo）
昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :) 1. 同步加载子选项demo2. 异步加载子选项demo3. 初始值回填demo4. 倒金字塔依赖demo directive的源代 ...
随机推荐
- 【 总结 】Tcp Keepalive 和 HTTP Keepalive 详解
TCP Keepalive Tcp keepalive的起源 双方建立交互的连接,但是并不是一直存在数据交互,有些连接会在数据交互完毕后,主动释放连接,而有些不会,那么在长时间无数据 ...
- iOS中按钮点击事件处理方式
写在前面 在iOS开发中,时常会用到按钮,通过按钮的点击来完成界面的跳转等功能.按钮事件的实现方式有多种,其中 较为常用的是目标-动作对模式.但这种方式使得view与controller之间的耦合程度 ...
- 方法名太多,使用方法的重载(overload)来解决
package chapter04; /* 问题:方法名太多了,不容易记忆,有时会出错 使用方法的重载(overload)来解决 */public class C09_Method { public ...
- python学习之集合
集合(set)是一个无序的不重复元素序列. 可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因为 { } 是用来创建一个空字典. 创建格 ...
- Codeforces 605C Freelancer's Dreams 凸包 (看题解)
Freelancer's Dreams 我们把每个二元组看成是平面上的一个点, 那么两个点的线性组合是两点之间的连线, 即x * (a1, b1) + y * (a1, b1) && ...
- Linux && 与 ||
一.&& && 表示前一条命令执行成功时,才执行后一条命令 ,如 echo '1‘ && echo '2' || 表示上一条命令执行失败后,才执行下一条 ...
- A Simple Math Problem HDU1757
一次ac 在做递推关系的题目的时候 快速幂矩阵真的很有用 #include<iostream> #include<cstdio> #include<cstring> ...
- 第七章|7.4并发编程| I/O模型
I/O模型 协程是单线程下的并发,并不是对性能都有所提升,一定是监测单个线程下的多个任务的I/O,遇到I/O不要让它阻塞,给它自动切换到其他任务去,这样就能提高单个线程下的运行效率.--->&g ...
- JVM GC-----3、垃圾标记算法（二）
在上一篇文章中,介绍了在GC机制中,GC是以什么标准判定对象可以被标记的,以及最有效最常用的可达性分析法.今天介绍另外一种非常常用的标记算法,它的应用面也相当广泛.这就是:引用计数法 Referenc ...
- 洛谷 P1387 最大正方形 【dp】（经典）
题目链接:https://www.luogu.org/problemnew/show/P1387 题目描述 在一个n*m的只包含0和1的矩阵里找出一个不包含0的最大正方形,输出边长. 输入格式: 输入 ...