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的方式性能要好。

时间: 2024-11-08 20:14:33

angular模块和组件之间传递信息和操作流程的方法(笔记)的相关文章

vue组件之间值传递四种方法汇总

1.父组件获取子组件的数据和方法 $refs 子组件: <template> <div class="header"> <h3>{{ zz }}</h3> </div></template> <script>export default { name: 'cx', data () { return { zz: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX' } }, methods: {

Angular 模块 (NgModule)

NgModule 是一个带有 @NgModule 装饰器的类. Angular 模块把组件.指令和管道打包成内聚的功能块,每个模块聚焦于一个特性区域.业务领域.工作流或通用工具. NgModule 的元数据会做这些: 声明某些组件.指令和管道属于这个模块. 公开其中的部分组件.指令和管道,以便其它模块中的组件模板中可以使用它们. 导入其它带有组件.指令和管道的模块,这些模块中的元件都是本模块所需的. 提供一些供应用中的其它组件使用的服务. 原文地址:https://www.cnblogs.com

Angular开发实践(四):组件之间的交互

在Angular应用开发中,组件可以说是随处可见的.本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法. 根据数据的传递方向,分为父组件向子组件传递.子组件向父组件传递及通过服务传递三种交互方法. 父组件向子组件传递 子组件通过@Input装饰器定义输入属性,然后父组件在引用子组件的时候通过这些输入属性向子组件传递数据,子组件可通过setter或ngOnChanges()来截听输入属性值的变化. 先定义两个组件,分别为子组件DemoChildComponent和父组件De

Angular组件之间通讯

组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板变量/@ViewChild) 2非父子组件(Service/localStorage) 3还可以利用Session等服务器端的解决方法 Angular组件间通讯方法: 1.父子组件之间的通讯 @Input:是属性绑定,父组件向子组件传递数据 @Output:是事件绑定,子组件向父组件传递数据的同时触

angular模块详解

原文: https://www.jianshu.com/p/819421ff955a 大纲 1.angular应用是模块化的 2.对模块(Module)的认识 3.模块的分类:根模块和特性模块 4.NgModel参数详解 5.imports数组与文件头部的import的对比 angular应用是模块化的 1.Angular 应用是模块化的,并且Angular有自己的模块系统,它被称为Angular模块或NgModules. 2.每个Angular应用至少有一个模块(根模块),习惯上命名为AppM

React 组件之间如何交流

原文  http://blog.51yuekan.com/2015/07/23/2015-07-19-react-component-communicate/ 主题 React 前言 今天群里面有很多都在问关于 React 组件之间是如何通信的问题,之前自己写的时候也遇到过这类问题.下面是我看到的一篇不错英文版的翻译,看过我博客的人都知道,我翻译可能不会按部就班,会尽可能用中文的意思,来将作者要讲述的技术描述清楚.英文能力有限,如果有不对的地方请跟我留言,一定修改--^_^ 原著序 处理 Rea

软件架构、框架、模式、模块、组件、插件概念汇总

术语 英文解释 中文解释 架构 architecture: Architecture is the art of planning, designing, and constructing buildings. 架构名词起源于建筑,没有明确标准的定义描述,不同人基于经验对它理解也多少会有差异.实际上架构就是指人们根据自己对世界的认识,为解决某个问题,主动地.有目的地去识别问题,并进行分解.合并,解决这个问题的实践活动.架构的产出物,自然就是对问题的分析,以及解决问题的方案:包括拆分的原则以及理由

Prism 文档 第三章 管理组件之间的依赖关系

                                                                      第3章:管理组件之间的依赖关系 基于Prism库的复合应用程序可能包含许多松耦合的类型和服务.他们需要提供内容和接收基于用户行为的通知.因为他们是松散耦合的,他们需要一种方式进行互动和相互沟通来提供所需的业务功能. 为了集中这些不同的块,基于Prism库的应用程序依赖于依赖注入容器.依赖注入容器通过提供设施去实例化类的实例和管理他们基于容器配置的寿命来减少对

Vue.js组件之间的通信

导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用) Props down, Events up 是指 使用props向子组件传递数据,父组件属性发生变化时,子组件可实时更新视图:子组件发生变化,可以使用$emit发送事件消息,以此向父组件传递变化消息. props 是单向的,当父组件的属性变化时,将传递给子组件,但子组件中的props属性变化不会