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的源代 ...
随机推荐
- spring mvc 校验@NULL
一需要的包 1 validation-api-1.0.0.GA.jar:JDK的接口: 2 hibernate-validator-4.2.0.Final.jar 是对上述接口的实现: 二 若在pom ...
- Python-JS事件与面向对象操作
目录一.函数高级 循环绑定: 使用循环绑定会出现的问题及解决方案: 二.面向对象 3.构造函数(ES5) 三.JS选择器 1.getElement系列(最严谨) 2.querySelector系列(最 ...
- echarts饼图不显示数据为0的数据
首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...
- html----属性操作
1.文本 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red‘’RGBA() 2.水平对齐方式 text-align 属性规定元素中 ...
- hdu3436 splaytree树模拟队列+离散化缩点
数据较大,需要先把每个top不会操作到的段缩成一个点,记录其开始和结束的位置,和top能操作到的点一起建立一颗伸展树模拟 然后就是普通的队列模拟操作 /* 不会被top操作到的区间就缩点 通过spla ...
- poj 2349 求MST中第S大的权值
题目大意: 有一些炮台,如果这个炮台有卫星接收器,那么任意两个有卫星接收器的炮台可以通信,不受距离限制:否者,两个炮台之间只能通过对讲机通信,这是受距离限制的.要买一种对讲机,用在需要的炮台上,要求所 ...
- Oracle分区表删除分区数据时导致索引失效解决
https://blog.csdn.net/e_wsq/article/details/80896258
- NFS服务自动搭建及挂载脚本
一.写脚本的动机 由于最近老是搭建NFS,虽然不复杂,但是很繁琐.安装服务.修改配置文件.手动挂载.写入开机自动挂载等于是就写了一个脚本 二.脚本说明及审明 作用:该脚本主要实现NFS自动安装,客户端 ...
- Python yaml处理
安装方式: pip install pyyaml 一.module.yaml为 name: Tom Smith age: 37 spouse: name: Jane Smith age: 25 chi ...
- Nginx 启动脚本，超级详细
转载自:https://www.cnblogs.com/leffss/p/7845303.html