在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的更多相关文章

  1. AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系

    Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁 ...

  2. AngularJS中Directive间交互实现合成

    假设需要烹饪一道菜肴,有3种原料,可以同时使用所有的3种原料,可以使用其中2种,也可以使用其中1种. 如果以Directive的写法,大致是:<bread material1 material2 ...

  3. python中进程间通讯——文件锁之fcntl模块的使用

    python 中给文件加锁——fcntl模块import fcntl 打开一个文件##当前目录下test文件要先存在,如果不存在会报错.或者以写的方式打开f = open('./test')对该文件加 ...

  4. 转深入理解 AngularJS 的 Scope作用域

    文章转载英文:what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs 中文:http://www. ...

  5. 一步步构建自己的AngularJS(2)——scope之$watch及$digest

    在上一节项目初始化中,我们最终得到了一个可以运行的基础代码库,它的基本结构如下: 其中node_modules文件夹存放项目中的第三方依赖模块,src存放我们的项目代码源文件,test存放测试用例文件 ...

  6. Android查缺补漏(IPC篇)-- 进程间通讯基础知识热身

    本文作者:CodingBlock 文章链接:http://www.cnblogs.com/codingblock/p/8479282.html 在Android中进程间通信是比较难的一部分,同时又非常 ...

  7. 一篇文章了解相见恨晚的 Android Binder 进程间通讯机制【转】

    本文转载自:https://blog.csdn.net/freekiteyu/article/details/70082302 Android-Binder进程间通讯机制 概述 最近在学习Binder ...

  8. Android Binder 进程间通讯机制梳理

    什么是 Binder ? Binder是Android系统中进程间通讯(IPC)的一种方式,也是Android系统中最重要的特性之一.Binder的设计采用了面向对象的思想,在Binder通信模型的四 ...

  9. AngularJS中实现无限级联动菜单(使用demo)

    昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :) 1. 同步加载子选项demo2. 异步加载子选项demo3. 初始值回填demo4. 倒金字塔依赖demo directive的源代 ...

随机推荐

  1. jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案

    1. 前言 由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件.这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题, ...

  2. cf1108e 线段树区间更新+扫描线

    /* 有点像扫描线 思路:从左到右枚举每个点,枚举到点i时,把所有以i为起点的区间的影响删去 再加上以i-1为结尾的区间的影响 */ #include<bits/stdc++.h> usi ...

  3. python 全栈开发,Day90(Vue组件,前端开发工具包)

    昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...

  4. RabbitMQ(三): exchange 的使用

    1. Exchange(交换机) 生产者只能发送信息到交换机,交换机接收到生产者的信息,然后按照规则把它推送到对列中. 一方面是接收生产者的消息,另一方面是像队列推送消息. 匿名转发 "&q ...

  5. JavaScript实现抽象类与虚方法(六)

    一:什么是js抽象类与虚方法 虚函数是类成员中的概念,是只做了一个声明而未实现的方法,具有虚函数的类就称之为抽象类,这些虚函数在派生类中才被实现.抽象类是不能实例化的,因为其中的虚函数并不是一个完整的 ...

  6. PTA之求单链表结点的阶乘和

    本题要求实现一个函数,求单链表L结点的阶乘和.这里默认所有结点的值非负,且题目保证结果在int范围内. 时间限制: 400ms 内存限制: 64MB 代码长度限制: 16KB 函数接口定义: int ...

  7. python算法双指针问题:两个有序数组的合并

    最近在看<你也能看得懂的python算法书>, 自己来实现一下里面的算法吧. 有书里的有所不同. 比如这个题目,我的实现如下: from django.test import TestCa ...

  8. AndrodStudio报错: Cannot launch AVD in emulator.

    Cannot launch AVD in emulator.Output:Hax is enabledHax ram_size 0x60000000HAX is working and emulato ...

  9. Burp Suite之截断代理功能及相关设置(一)

    Burpsuite 1.burpsuite 简介2.设置代理3.Target4.爬网模块5.扫描模块6.扩展模块7.intrude8.Repeater9.Sequencer10.Decoder11.C ...

  10. 函数式编程之 Python

    上接 python 函数式编程学习笔记 参考:www.sigai.cn/ 1 函数式编程概述 前提:函数在 Python 中是⼀等对象 工具:built-in ⾼阶函数:lambda 函数:opera ...