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的源代 ...
随机推荐
- Nodejs实现WebSocket通信demo
一.创建websocket.js文件 步骤: 1.创建websocket.js文件,复制如下代码: 2.安装nodejs-websocket依赖: 3.该文件夹下命令行执行 node websocke ...
- PHP CLI模式下的多进程应用
作者: Laruence( ) 本文地址: http://www.laruence.com/2009/06/11/930.html 转载请注明出处 PHP在很多时候不适合做常驻的SHELL进程, ...
- PHP共享内存详解
前言 在PHP中有这么一族函数,他们是对UNIX的V IPC函数族的包装. 它们很少被人们用到,但是它们却很强大.巧妙的运用它们,可以让你事倍功半. 它们包括: 信号量(Semaphores) 共享内 ...
- Tomcat启动startup.bat闪退和JRE_HOME错误
转载:http://blog.csdn.net/xushikuan/article/details/8132317 昨天学习Struts2,下载Tomcat7,太恶心了. 先是报个错,无法启动,基本意 ...
- node调试工具--nodemon
- java多线程快速入门（二）
通过继承Thread类来实行多线程 package com.cppdy; //通过继承Thread类来实行多线程 class MyThread extends Thread{ @Override pu ...
- vim的基本用法
- C#读取wav文件
private void showWAVForm(string filepath) //此函数只能用于读取16bit量化单声道的WAV文件 { FileStream fs = new FileStre ...
- #3 Codeforces-865C Gotta Go Fast（期望dp）
题意:一个游戏一共有n个关卡,对于第i关,用a[i]时间通过的概率为p[i],用b[i]通过的时间为1-p[i],每通过一关后可以选择继续下一关或者时间清0并从第一关开始,先要求通过所有关卡的时间和不 ...
- [ZJOI2011]最小割
题解: 以前看过,思维挺神奇的一道题目 首先可以证明最小割是不能相交的 那么我们就可以找到任意两点求一次最小割然后将割的两边分开来再递归这个过程 另外最小割就是vis=0与vis=1之间的连边 分治的 ...