angular模块和组件之间传递信息和操作流程的方法(笔记)
angular的模块之间,以及controller、directive等组件之间,是相对独立的,用以实现解耦合。
为实现相互之间传递信息及操作流程,有以下一些机制:
1、事件机制:
$scope.$broadcast:向下广播事件,下方所有的scope都会接收到这个事件,事件不能中途终止。
$scope.$emit:向上冒泡事件,可带参数,一直冒泡到$rootScope,中途可以用stopPropagation()方法终止冒泡。
2、scope的继承机制:
子scope的__proto__对象就是父scope,从而直接实现了数据从父scope传递到子scope。
但无法直接将数据传递给父scope,但可以通过调用父scope上的js方法,把数据通过参数传递给父scope
3、watch机制:
在子scope上可以$watch一个变量名,绑定一个回调函数。当父scope上改变这个变量时,就会执行子scope的回调函数,从而实现父scope到子scope的调用。
这种方式比通过$broadcast的方式性能要好。
angular模块和组件之间传递信息和操作流程的方法(笔记)的更多相关文章
- 「Vue」父子组件之间的传值及调用方法
a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'&g ...
- vue组件之间值传递四种方法汇总
1.父组件获取子组件的数据和方法 $refs 子组件: <template> <div class="header"> <h3>{{ zz }} ...
- Angular中不同的组件间传值与通信的方法
主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...
- react 组件之间传值
谈及React时,就会想到一个很重要的思想,就是组件化思想.它将可以重用的部分进行组件化开发,形成一个个相对独立的组件,那么组件化后,你也会提出些疑问,组件与组件之间,将怎样进行信息的传递呢?下面来介 ...
- Angular 向组件传递模板的几种方法
最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时 ...
- Angular开发实践(四):组件之间的交互
在Angular应用开发中,组件可以说是随处可见的.本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法. 根据数据的传递方向,分为父组件向子组件传递.子组件向父组件传递及通过服 ...
- Angular组件之间通讯
组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板 ...
- Angular06 组件、模块、父子组件之间的数据传递
1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...
- 一个Angular模块中可以声明哪些组件?
一个Angular模块中可以声明哪些组件? (1) controller 控制器 (2) directive 指令 (3) function ...
随机推荐
- espcms列表页ajax无限加载
类似百度图片的效果,滚动到底部后,点击加载更多,加载出第二页,第三页... 替代了传统的上一页,下一页,第几页,以达到在某些情况下使得用户体验更好. 二次开发方法: 1.先在模板文件中增加ajax文件 ...
- js框架设计1.2对象扩展笔记
需要一个新的功能添加到我们的命名空间上.这方法在JS中被叫做extend或者mixin,若是遍历属性用一下1.1代码,则会遍历不出原型方法,所以1.2介绍的是mass Framework里的mix方法 ...
- mysql状态取反(0变1,1变0)
如果要改变status状态 update table_name status=ABS(status-1); //取绝对值 则0-->1 1-->0
- iOS开发UI篇—CAlayer层的属性
iOS开发UI篇—CAlayer层的属性 一.position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property ...
- c语言中在引用math库后,编译出现错误(.text+0x9c):对‘sqrt’未定义的引用的解决办法
写于2016年11月29日晚. 原因是gcc编译器没有引用默认的math库,需要在执行编译命令时加上-ml.例如: gcc 源文件 -ml -o 编译后文件名 或者 gcc 源文件 -lm -o 编译 ...
- C++中动态内粗分配new标识符的使用
new是C++中内建的操作符,具体用法见下面详解: (1)new用法一:基本数据类型的内存动态分配 int *p; p=new int(10): 在这个例子中首先定义个一个指向整型类型的指针,紧接着用 ...
- 与你相遇好幸运,Postman设置Header不生效问题解决
POstMan安装地址 安装完 , Postman 设置Header的Referer不生效 , 提示 Restricted Header (use postman interceptor) 时 , 要 ...
- SecureCRT 使用 rz 和 sz 命令
1.下载软件 rzsz-3.34.tar.gz,登录linux,用命令 wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载. 2.解 ...
- JS里面的两种运动函数
最新学了一个新的运动函数,与最初学习的有所不同,第一个运动是根据运动速度完成运动 ,第二个则是根据运动的时间来完成运动,而且把之前的函数都进行了一些兼容处理,在这里列出了看一下: 第一种animate ...
- css疑难汇总
关于a标签不换行顶开容器的问题(转自): 我们用div,p,ul,li(等块级元素)布局给其设定了特定的width,那么就会自动的换行.用span,a(等内联元素)设置了display:inline- ...