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的源代 ...
随机推荐
- 分布式调用技术 RPC VS REST
一 分布式调用大体上就分为两类,RPC式的,REST式的,两者的区别主要是就是: 1. RPC是面向动作的(方法调用) 2. REST是面向资源的(URL表示资源,HTTP动词表示动作) 从变现形式来 ...
- 最全的基于MFC的ActiveX控件开发教程
浏览器插件之ActiveX开发(一) 一般的Web应用对于浏览器插件能不使用的建议尽量不使用,因为其涉及到安全问题以及影响用户安装(或自动下载注册安装)体验问题.在有特殊需求(如涉及数据安全的金融业务 ...
- mysql8.0CTE实现递归查询
+----+----------+--------------+| ID | ParentID | name |+----+----------+--------------+| 1 ...
- 《剑指offer》-逐层打印二叉树
题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 乍一看就是一个BFS,但是因为太久没刷题都忘记了要使用queue来作为空间存储容器了. 先参考milolip的代码,写出这样 ...
- lldp
https://wenku.baidu.com/view/b9d831f26294dd88d0d26b20.html
- POJ 3126 Prime Path （素数+BFS）
题意:给两个四位素数a和b,求从a变换到b的最少次数,每次变换只能变换一个数字并且变换的过程必须也是素数. 思路:先打表求出四位长度的所有素数,然后利用BFS求解.从a状态入队,然后从个位往千位的顺序 ...
- zjoi 网络
题解: 很显然会发现对于每种颜色分开处理这是一颗树 然后就是裸的lct 有个坑就是判断操作1 可能颜色改成跟原先一样的 代码: #include <bits/stdc++.h> using ...
- BZOJ3545 [ONTAK2010]Peaks kruskal 并查集 主席树 dfs序
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ3545 题意概括 Description 在Bytemountains有N座山峰,每座山峰有他的高度 ...
- BZOJ1201 [HNOI2005]数三角形 大力出奇迹
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1201 题意概括 题解 n3跑过去了,大力出奇迹!简单的,不多说了. 代码 #include < ...
- 各种浏览器下的页面元素xpath获取方法
参考链接: http://blog.sina.com.cn/s/blog_654c6ec70100v1i2.html