AngularJs开发——控制器间的通信
AngularJs开发——控制器间的通信
指令与控制器之间通信,无非是以下几种方法:
- 基于scope继承的方式
- 基于event传播的方式
- service的方式
基于scope继承的方式
最简单的让控制器之间进行通信的方法是通过scope的继承。假设有两个控制器Parent、Child,Child 在 Parent 内,那Child 可以称为控制器Parent的子控制器,它将继承父控制器Parent的scope。这样,Child就可以访问到Parent的scope中的所有函数和变量了。
需要注意的是,由于scope的继承是基于Js的原型继承,如果变量是基本类型的,那在Child中的修改(写),有可能会导致Parent中的数据变脏。如下:
基本类型以及引用类型变量的继承
此DEMO代码中我们看到,两个_value,其中一个 _value 属性是直接被注册到 $scope 中,另一个 _value 是注册到 parent 控制的 $scope.obj 中,DEMO效果如下:
- child能读取到parent中的_value值,所以默认页面 显示的是4个 default值
- 如果先改变了直接注册在child上 $scope 上的 _value 属性,则直接注册在 parent.$scope 的 _value 跟直接注册在 chile.$scope 的 _value 失去了联系,页面上的表现:就是如果先点击了child的按钮,点击parent的按钮 child.$scope 上的 _value 则不会变化。
- 反过来,如果未对直接注册在 chile.$scope 的_value进行改写,则注册在 parent.$scope 的 _value 跟chile.$scope 的 _value还有联系,页面上表现跟以上相反。
- 而注册在 obj 上的 _value 属性,则一直是有联系的。
经过以上实验,我们得出一下结论:
子级scope改写的属性不要直接注册在 $scope 对象上,而应该尽可能注册在 $scope 上的引用类型上,一面污染$scope。
基于event传播的方式
通过 scope 继承 能处理父子级控制器之间的通信问题,但是不能处理兄弟/相邻控制器之间的通信问题。而基于 event 传递的方式进行通信可以解决父子级的通信问题。angular提供了三个方法:$on , $emit , $broadcast
子–>父:$emit
event传播过程是这样的:
- 子scope中的控制器通过 $scope.$emit 注册一个向上传播的事件
- 该事件会经过每一层的父scope,但是每一层父scope不会去处理
- 如果要处理,就在想要处理的父scope中使用 $scope.$on 监听,就好了
跟JS中的DOM事件一样,如果你不想让你的事件再往更上层传播,在$on中的处理函数调用e.stopPropagation()即可。
父–>子:$broadcast
从父到子,跟子集到父级一样,使用同样用$broadcast注册时间,用 $on 监听着,DEMO。
同级之间
拥有同个父scope的子级scope之间,也就是兄弟/相邻scope之间的通信,其实是借助共同父级传递消息的:
- 子级scope中有谁想传消息了,$emit 一个给“奶爸”
- 然后通过“奶爸” $broadcast 给所有孩子这个相同的信息,当然发出信息的那个可以选择是否要忽略掉自己发出的信息
angular服务的方式
在angular中服务是一个单例,在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子,在一个控制器修改了服务对象的值,在另一个相邻控制器中获取到修改后的值:
AngularJs开发——控制器间的通信的更多相关文章
- angular开发控制器之间的通信
一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...
- AngularJs开发——指令与控制器间的通信
(原文:http://www.html5jscss.com/controller-between-directive.html) 指令与控制器之间通信,跟控制器间的通信.指令间通信也类似,也是下几种方 ...
- angularjs中控制器之间的通信----$on、$emit和$broadcast解析
$on.$emit和$broadcast使得event.data在controller之间的传递变的简单. $emit只能向parent controller传递event与data $broadca ...
- angularJS平行控制器间共享数据
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- angular 控件间的通信
先引入 设置meta元素 http://blog.sina.com.cn/s/blog_51048da70101cgea.html //设置 虚拟窗口的大小等于设备的大小 <meta name= ...
- AngularJS中控制器之间通信方法
在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...
- iOS开发多线程篇—线程间的通信
iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任 ...
- iOS开发多线程篇 04 —线程间的通信
iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任 ...
- Android UI开发第二十六篇——Fragment间的通信
为了重用Fragment的UI组件,创建的每个Fragment都应该是自包含的.有它自己的布局和行为的模块化组件.一旦你定义了这些可重用的Fragment,你就可以把它们跟一个Activity关联,并 ...
随机推荐
- JSOI2018 R1 & 九省联考2018 滚粗记
在NOIP与PKUWC相继滚粗后,rp守恒定律似乎终于开始起作用了…… (尽管Day2依然滚粗?) Day1: 本着前40min不写代码的准则,先把三道题大致过了一遍,似乎都比较喜闻乐见? T1:对抗 ...
- dfs Gym - 100989L
AbdelKader enjoys math. He feels very frustrated whenever he sees an incorrect equation and so he tr ...
- java程序——两数的加减乘除
import javax.swing.JOptionPane; // import class JOptionPane public class Elementary { public static ...
- 洛谷P3958 奶酪
题目链接 这道题貌似可以用BFS来写吧qwq. 我用的是并查集,把联通的洞合并在同一个几何中,最后只需要判断是否存在上表面和下表面有相同集合的洞即可. 但是需要注意的是还有这样的一种情况:有一个大洞贯 ...
- Web框架本质及浅谈HTTP协议
Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...
- Ubuntu下使用Git_6
这回真的是最后一篇了,哈哈,改写提交. 这里这部分在目前的学习阶段还没有用到,所以,这里将不在有实验的部分,在下面的链接中有详细的介绍 这也是我第一讲一个网站的内容完成的学习完成,这这部分,我讲简单的 ...
- fildder抓包工具详解
fildder页面介绍名称和含义 名称 含义 # 抓取HTTP Request的顺序,从1开始,以此递增 Result HTTP状态码 Protocol 请求使用的协议,如HTTP/HTTPS/FTP ...
- 爬取图片过程遇到的ValueError: Missing scheme in request url: h 报错与解决方法
一 .scrapy整体框架 1.1 scrapy框架图 1.2 scrapy框架各结构解析 item:保存抓取的内容 spider:定义抓取内容的规则,也是我们主要编辑的文件 pipelines:管道 ...
- [PocketFlow]解决在coco上mAP非常低的bug
1.问题 继上次训练挂起的bug后,又遇到了现在评估时AP非常低的bug.具体有多低呢?Pelee论文中提到,用128的batchsize大小在coco数据集上训练70K次迭代后,AP@0.5:0.9 ...
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...