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的源代 ...
随机推荐
- 测试开发之前端——No7.HTML5中的鼠标事件
鼠标事件 由鼠标或相似的用户动作触发的事件. 适用于所有 HTML 5 元素: 属性 值 描述 onclick script 当单击鼠标时运行脚本 ondblclick script 当双击鼠标时运行 ...
- JS实现购物车01
需求 使用JS实现购物车功能01 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- SQL开发测试使用基础
目录 一.客户端配置与使用 1.oracle(PLSQL Developer) 2.hive(hive cli)及命令 3.postgre(pgAdmin) 二.注意事项及基础 ...
- ubuntu 电源管理
https://www.cnblogs.com/sky-heaven/p/4561374.html?tdsourcetag=s_pcqq_aiomsg 挂起命令 echo mem > /sys ...
- poj1195二维树状数组模板
二维树状数组和一维的也差不多,改一下add和query函数即可:即按行修改,行内单点修改即可 /* 二维树状数组,询问一个二维区间内的数之和 */ #include<iostream> # ...
- 步步为营-56-JQuery基础
jQuery本质还是封装好的js,只不过代码更简洁,而做的更好 使用JQuery选择器会返回一个jQuery对象,其本质是dom数组,jQuery对象可以调用JQuery方法. 1 选择器 1.1 基 ...
- POJ 2377 Bad Cowtractors (Kruskal)
题意:给出一个图,求出其中的最大生成树= =如果无法产生树,输出-1. 思路:将边权降序再Kruskal,再检查一下是否只有一棵树即可,即根节点只有一个 #include <cstdio> ...
- c++ primer 笔记 （二）
第二章笔记 (貌似记得有点多) 把负值赋给unsigned对象时完全合法的,其结果是该负数对该类型的取值个数求模后的值 -1 (对265求模) 255 float型只能保证6位 ...
- openstack学习-nove控制节点部署（四）
nove在openstack非常重要,主要负责创建虚拟机 nova计算服务 API :负责接收和响应外部请求.支持openstack API,EC2 API Cert:负责身份认证EC 2 Sched ...
- PHP 三元运算 ??与?:
//$c = $a ?? $b; 等效 $c = isset($a) ? $a : $b; //$c = $a ?: $b; 等效 $c = $a ? $a : $b; $a = 'a'; $b = ...