AngularJs开发——控制器间的通信

指令与控制器之间通信,无非是以下几种方法:

  1. 基于scope继承的方式
  2. 基于event传播的方式
  3. 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效果如下:

  1. child能读取到parent中的_value值,所以默认页面 显示的是4个 default值
  2. 如果先改变了直接注册在child上 $scope 上的 _value 属性,则直接注册在 parent.$scope 的 _value 跟直接注册在 chile.$scope 的 _value 失去了联系,页面上的表现:就是如果先点击了child的按钮,点击parent的按钮 child.$scope 上的 _value 则不会变化。
  3. 反过来,如果未对直接注册在 chile.$scope 的_value进行改写,则注册在 parent.$scope 的 _value 跟chile.$scope 的 _value还有联系,页面上表现跟以上相反。
  4. 而注册在 obj 上的 _value 属性,则一直是有联系的。

经过以上实验,我们得出一下结论:

子级scope改写的属性不要直接注册在 $scope 对象上,而应该尽可能注册在 $scope 上的引用类型上,一面污染$scope。

基于event传播的方式

通过 scope 继承 能处理父子级控制器之间的通信问题,但是不能处理兄弟/相邻控制器之间的通信问题。而基于 event 传递的方式进行通信可以解决父子级的通信问题。angular提供了三个方法:$on , $emit , $broadcast

子–>父:$emit

event传播过程是这样的:

  • 子scope中的控制器通过 $scope.$emit 注册一个向上传播的事件
  • 该事件会经过每一层的父scope,但是每一层父scope不会去处理
  • 如果要处理,就在想要处理的父scope中使用 $scope.$on 监听,就好了

DEMO

跟JS中的DOM事件一样,如果你不想让你的事件再往更上层传播,在$on中的处理函数调用e.stopPropagation()即可。

父–>子:$broadcast

从父到子,跟子集到父级一样,使用同样用$broadcast注册时间,用 $on 监听着,DEMO。

同级之间

拥有同个父scope的子级scope之间,也就是兄弟/相邻scope之间的通信,其实是借助共同父级传递消息的:

  • 子级scope中有谁想传消息了,$emit 一个给“奶爸”
  • 然后通过“奶爸” $broadcast 给所有孩子这个相同的信息,当然发出信息的那个可以选择是否要忽略掉自己发出的信息

angular服务的方式

在angular中服务是一个单例,在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子,在一个控制器修改了服务对象的值,在另一个相邻控制器中获取到修改后的值:

DEMO

AngularJs开发——控制器间的通信的更多相关文章

  1. angular开发控制器之间的通信

    一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...

  2. AngularJs开发——指令与控制器间的通信

    (原文:http://www.html5jscss.com/controller-between-directive.html) 指令与控制器之间通信,跟控制器间的通信.指令间通信也类似,也是下几种方 ...

  3. angularjs中控制器之间的通信----$on、$emit和$broadcast解析

    $on.$emit和$broadcast使得event.data在controller之间的传递变的简单. $emit只能向parent controller传递event与data $broadca ...

  4. angularJS平行控制器间共享数据

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. angular 控件间的通信

    先引入 设置meta元素 http://blog.sina.com.cn/s/blog_51048da70101cgea.html //设置 虚拟窗口的大小等于设备的大小 <meta name= ...

  6. AngularJS中控制器之间通信方法

    在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...

  7. iOS开发多线程篇—线程间的通信

    iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任 ...

  8. iOS开发多线程篇 04 —线程间的通信

    iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任 ...

  9. Android UI开发第二十六篇——Fragment间的通信

    为了重用Fragment的UI组件,创建的每个Fragment都应该是自包含的.有它自己的布局和行为的模块化组件.一旦你定义了这些可重用的Fragment,你就可以把它们跟一个Activity关联,并 ...

随机推荐

  1. EXKMP学习笔记QAQ

    因为一本通少了一些算法,所以我就自行补充了一些东西上去. EXKMP也就是扩展KMP,是一种特别毒瘤的东西 EXKMP确实很难,我理解他的时间与AC机的时间差不多,而且还很难记,因此一学会就马上写博客 ...

  2. makefile = 与 := 的区别

    “=” make会将整个makefile展开后,再决定变量的值.也就是说,变量的值将会是整个makefile中最后被指定的值.看例子: x = foo            y = $(x) bar  ...

  3. 014---Django的中间件

     前戏 我们在前面的课程中已经学会了给视图函数加装饰器来判断是用户是否登录,把没有登录的用户请求跳转到登录页面.我们通过给几个特定视图函数加装饰器实现了这个需求.但是以后添加的视图函数可能也需要加上装 ...

  4. PHP环境搭建-记录

    转于 http://jingyan.baidu.com/article/fcb5aff797ec41edaa4a71c4.html php5.5 做了大量的更新,在与apache搭配的时候如何选择也很 ...

  5. 1511: [POI2006]OKR-Periods of Words

    1511: [POI2006]OKR-Periods of Words https://www.lydsy.com/JudgeOnline/problem.php?id=1511 题意: 对于一个串的 ...

  6. LARK BOARD开发板入门学习-第2篇

    1. 本次主要研究下HDMI接口,使用芯片是CH7033,这个芯片可以接VGA和HDMI两种接口,和FPGA的接口是地址数据总线 2. 值得注意的地方,下图的D1,双二极管BAT54S在电路中一般用于 ...

  7. C++学习005-循环

    C++在循环方面,感觉个C没有身边么区别 while循环 for循环 do while循环 其实 使用Goto也可以写个循环 编写环境vs2015 1. while循环 int main() { in ...

  8. Python升级3.6 强力Django+Xadmin打造在线教育平台

    第 1 章 课程介绍 1-1 项目演示和课程介绍: 第 2 章 Windows下搭建开发环境 2-1 Pycharm.Navicat和Python解释器的安装: Pycharmhttp://www.j ...

  9. 异常处理中try,else,finally含有return的情况解析

    直接看代码,拿到你的py下运行测试一下就 明白了. 例一: def f(): try: print() finally: print() print(f()) # 若注释掉finally内的retur ...

  10. (原创)白话KMP算法(续)

    第二章:KMP改良算法 第一章里面我们讲完了KMP算法的next数组实现法,回忆一下其实最重要的内容无非就是一.理解 i 指针无用回溯的意义,二.理解 j 指针的定位和模式串中每个元素重复度的关系,三 ...