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

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

时间: 2024-09-27 13:45:19

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

angularJS平行控制器间共享数据

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body ng-app="myApp"> <div ng-controller="c1"> {{name}} , {{msg}} , {{data

AngularJS(四)——AngularJS与其他框架间的通信问题

在一个web项目中,不能保证只使用一种JavaScript框架,一种常见的情况是同时使用了jQuery和AngularJS框架进行开发:另一种常见的情况是,现需要对之前完全以jQuery为框架开发的项目扩展功能,为了方便需要使用AngularJS.这两种情况都存在一个不同框架间互相通信的问题.使用以下三种AngularJS方法,如表-1所示,可以较好的解决这一问题: 表-1 AngularJS方法 有两点需要特别说明一下: 1. handler 这里的handler是一个接收两个参数的函数,两个

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

iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任务后,转到另1个线程继续执行任务 线程间通信常用方法 - (void)performSelectorOnMainThread:(SEL)aSelector withObject:(id)arg waitUntilDone:(BOOL)wait; - (void)performSelector:(SE

iOS开发:控制器间的数据传递

在iOS开发中遇到的控制器间的数据传递主要有两种情况:顺传递与逆传递.顺传递是指数据的传递方向和控制器的跳转方向相同(如图1):逆传递是指数据的传递方向和控制器的跳转方向相反(如图2).这里分别介绍这两种传递方式的具体做法. 顺传递 如果是用的SB,顺传递较简单,只需在A控制器的prepareForSegue:sender:方法中根据segue参数取得destinationViewController,也就是目标控制器C,直接给控制器C传递数据.从A传来的数据要在C的viewDidLoad方法中

iOS多线程开发小demo5 线程间的通信

// DYFViewController.m // 623-06-线程间的通信 // // Created by dyf on 14-6-23. // Copyright (c) 2014年 ___FULLUSERNAME___. All rights reserved. // #import "DYFViewController.h" @interface DYFViewController () @property (weak, nonatomic) IBOutlet UIImag

iOS开发多线程篇—线程间的通信(转)

这里转载 给自己一个备份 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任务后,转到另1个线程继续执行任务 线程间通信常用方法 - (void)performSelectorOnMainThread:(SEL)aSelector withObject:(id)arg waitUntilDone:(BOOL)wait; - (void)performSelector:(SEL)aS

OS开发多线程篇—线程间的通信

iosblog's iOS开发多线程篇—线程间的通信 Cocoa为iOS线程间通信提供2种方式,1种是performSelector,另1种是Port. 先说第1种,performSelector,有以下几种: 第2种为NSMachPort方式.NSPort有3个子类,NSSocketPort.NSMessagePort.NSMachPort,但在iOS下只有NSMachPort可用. 使用的方式为接收线程中注册NSMachPort,在另外的线程中使用此port发送消息,则被注册线程会收到相应消

iOS开发————对象间通信之block

一.block的概念: 别称:代码段,块,闭包,是苹果公司添加到OC语言中的. 作用:在程序运行的过程中保存一段代码,并且这段代码可以进行传递. 应用:用于对象间的通信. 二.block的语法: 和函数指针的语法相似 要设定block的返回值和参数个数及类型. (1)定义: 无参无返回值的block变量:void (^myBlock)(void) 有参数有返回值的block变量 int (^sumBlock)(int, int); (2)赋值: myBlock = ^{ //block中的代码

python全栈开发day32-进程创建,进程同步,进程间的通信,进程池

一.内容总结 1.进程创建 1) Process:两种创建一个新进程的方法: 1.实例化Process,通过args=(,)元组形式传参,2创建类继承Process,类初始化的时候传参数 2) p.join(),阻塞主进程,执行完p进程后,释放 3)  守护进程 ,守护主程序代码执行完毕,p.daemon = True import time from multiprocessing import Process def func(): while True: print('is alive')