- 浏览: 494574 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (502)
- Java (70)
- Linux (10)
- 数据库 (38)
- 网络 (10)
- WEB (13)
- JSP (4)
- 互联网 (71)
- JavaScript (30)
- Spring MVC (19)
- HTML (13)
- CSS (3)
- AngularJS (18)
- Redis (5)
- Bootstrap CSS (1)
- ZooKeeper (4)
- kafka (6)
- 服务器缓存 (4)
- Storm (1)
- MongoDB (9)
- Spring boot (16)
- log4j (2)
- maven (3)
- nginx (5)
- Tomcat (2)
- Eclipse (4)
- Swagger (2)
- Netty (5)
- Dubbo (1)
- Docker (7)
- Hadoop (12)
- OAuth (1)
- webSocket (4)
- 服务器性能 (7)
- Session共享 (1)
- tieye修改 (1)
- 工作 (1)
- 有用的语录 (0)
- https (2)
- common (5)
- 产品开发管理 (1)
- CDN 工作原理 (1)
- APNS、GCM (1)
- 架构图 (3)
- 功能实现分析 (1)
- JMX (1)
- 服务器相关操作命令 (1)
- img02 (0)
- 服务器环境搭建 (9)
- goodMenuBook (1)
- CEInstantPot (0)
- 有用数据 (1)
- 百度地图WEB API (2)
- 正则表达式 (1)
- 样式例子 (2)
- staticRecipePressureCooker.zip (1)
- jCanvas (1)
- 网站攻击方法原理 (1)
- 架构设计 (3)
- 物联网相关 (3)
- 研发管理 (7)
- 技术需求点 (1)
- 计划 (1)
- spring cloud (11)
- 服务器开发的一些实用工具和方法 (1)
- 每天学到的技术点 (4)
- Guava (1)
- ERP 技术注意要点 (2)
- 微信小程序 (1)
- FineRepor (1)
- 收藏夹 (1)
- temp (5)
- 服务架构 (4)
- 任职资格方案 (0)
- osno_test (1)
- jquery相关 (3)
- mybatis (4)
- ueditor (1)
- VueJS (7)
- python (10)
- Spring EL (1)
- shiro (1)
- 前端开发原理与使用 (7)
- YARN (1)
- Spark (1)
- Hbase (2)
- Pig (2)
- 机器学习 (30)
- matplotlib (1)
- OpenCV (17)
- Hystrix (1)
- 公司 (1)
- miniui (4)
- 前端功能实现 (3)
- 前端插件 (1)
- 钉钉开发 (2)
- Jenkins (1)
- elasticSearch使用 (2)
- 技术规范 (4)
- 技术实现原理 (0)
最新评论
$on、$emit和$broadcast的使用
如何在作用域之间通信
1.其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信(通过服务来进行数据的共享)
2.另外一个选择:通过作用域中的事件处理通信。(以下就是这种方式)
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单
1.$emit只能向parent controller传递event与data
2.$broadcast只能向child controller传递event与data
3.$on用于接收event与data //
相关事件API
1.event.targetScope,发出或者传播原始事件的作用域
2.event.currentScope,目前正在处理的事件的作用域
3.event.name,事件名称
4.event.stopPropagation(),一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
5.event.preventDefault(),这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
6.event.defaultPrevented,如果调用了`preventDefault`则为true
如何在作用域之间通信
1.其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信(通过服务来进行数据的共享)
2.另外一个选择:通过作用域中的事件处理通信。(以下就是这种方式)
$on、$emit和$broadcast使得event、data在controller之间的传递变的简单
1.$emit只能向parent controller传递event与data
2.$broadcast只能向child controller传递event与data
3.$on用于接收event与data //
<div ng-controller="ParentCtrl"> <!--父级--> <div ng-controller="SelfCtrl"> <!--自己--> <a ng-click="click()">click me</a> <div ng-controller="ChildCtrl"></div> <!--子级--> </div> <div ng-controller="BroCtrl"></div> <!--平级--> </div> app.controller('SelfCtrl', function($scope) { $scope.click = function () { $scope.$broadcast('to-child', {A:"A",B:"b"}); //to-child是事件名称,child为数据(可以为一个对象) $scope.$emit('to-parent', 'parent'); // } }); app.controller('ParentCtrl', function($scope) { $scope.$on('to-parent', function(event,data) { console.log('ParentCtrl', data); //父级能得到值 }); $scope.$on('to-child', function(event,data) { console.log('ParentCtrl', data); //子级得不到值 }); }); app.controller('ChildCtrl', function($scope){ $scope.$on('to-child', function(event,data) { console.log('ChildCtrl', data); //子级能得到值 }); $scope.$on('to-parent', function(event,data) { console.log('ChildCtrl', data); //父级得不到值 }); }); app.controller('BroCtrl', function($scope){ $scope.$on('to-parent', function(event,data) { console.log('BroCtrl', data); //平级得不到值 }); $scope.$on('to-child', function(event,data) { console.log('BroCtrl', data); //平级得不到值 }); });
相关事件API
1.event.targetScope,发出或者传播原始事件的作用域
2.event.currentScope,目前正在处理的事件的作用域
3.event.name,事件名称
4.event.stopPropagation(),一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
5.event.preventDefault(),这个方法实际上不会做什么事,但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
6.event.defaultPrevented,如果调用了`preventDefault`则为true
发表评论
-
lazyLoad
2017-05-10 00:11 557<!DOCTYPE html> <html ... -
timer
2017-05-10 00:17 422<!DOCTYPE html> <html ... -
滚动到指定元素、判断对象是否为空
2017-05-10 00:16 712<!DOCTYPE html> <html ... -
Http请求封装
2017-05-09 22:21 547<!DOCTYPE html> <html ... -
上传文件内容改变和上传文件
2017-05-09 21:56 503<!DOCTYPE html> <html ... -
ng-click参数传递
2017-05-09 21:35 944<!DOCTYPE html> <html ... -
promise(js里很多服务的then实现分析)
2016-09-14 01:07 942promise(很多少服务的then) 1、promise ... -
AngularJs directive(指令)
2016-09-14 01:07 886AngularJs directive(指令) ... -
Anguar 工作过程
2016-09-14 01:05 366Anguar 工作过程 Anguar的指令编译过程: 1 ... -
AngularJS Ajax($http)
2016-09-14 01:07 806AngularJS Ajax($http) 1.$http ... -
Angularjs run(AngularJS应用中第一个被执行的方法)
2016-09-15 13:10 603Angularjs run(AngularJS应用中第一个被执 ... -
AngularJs框架下controller间的传值方法
2016-09-15 13:10 601AngularJs框架下controller间的传值方法 ... -
AngularJs API
2016-09-13 14:59 586AngularJs API 以下列出了一些通用的 API ... -
AngularJS 路由
2016-09-13 14:58 597AngularJS 路由 AngularJS 路由允许我们 ... -
AngularJS $location
2016-09-13 14:46 625AngularJS $location $location ... -
AngularJS中service,factory,provider的区别
2016-09-13 09:30 609AngularJS中service,factory ... -
AngularJS基础
2016-09-17 20:52 421AngularJS基础 AngularJS 是 ...
相关推荐
2. 使用$on、$emit和$broadcast方法:AngularJS通过事件系统提供了一种在作用域之间通信的方式,这种方法不需要手动管理服务。 - $emit方法用于从当前作用域向上冒泡事件到父作用域。当你在子作用域中调用$scope.$...
Angular中$broadcast和$emit的使用方法详解 Angular是一个流行的前端框架,它提供了许多强大的功能来帮助开发者快速构建应用程序。在Angular中,有两个重要的方法:$broadcast和$emit,它们都是用于在控制器之间...
合理使用$broadcast、$emit和$on方法,可以有效地管理复杂的页面逻辑和事件处理。这对于构建动态的、交互性强的web应用来说是十分重要的。在实际开发过程中,开发者应根据具体的应用场景,选择合适的事件广播方式,...
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on vm.$on( event, callback ) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 vm.$emit( ...
AngularJS提供了事件广播机制,允许控制器之间通过事件来传递数据,包括 `$on`、`$emit` 和 `$broadcast`。 - `$on`: 注册一个事件处理函数,当事件被当前作用域或其上级作用域触发时执行。 - `$emit`: 向当前...
这扩展了 $rootScopeProvider 以创建一个 $scope 隔离,使用 $emit 和 $broadcast 方法装饰以在:冒号上拆分事件。 可以在找到实现的变化。 一个真正应该作为测试的使用示例 ngModule . run ( function ( $...
实现基于Websocket 协议的 PHP类库 和 javascript类库 , 实现事件 回调函数的架构开发,以一个简单聊天室实例介绍其使用方法: 不同浏览器,不同电脑,不同地域, 实时通讯。实现的详细 请研究源码。 /***服务端*...
AngularJS提供了一种优雅的方式来处理Controller间的通信,主要依赖于Scope的事件机制,包括`$broadcast`、`$emit`和`$on`。 1. **事件机制**: - **$on**:这是AngularJS中的事件监听器,用于注册事件处理函数。...
使用$on()监听事件; 使用$emit()在它上面触发事件; 使用$dispatch()派发事件,事件沿着父链冒泡; 使用$broadcast()广播事件,事件向下传导给所有的后代 Vue2.0后$dispatch(),$broadcast()被弃用,见...
本篇文章将深入探讨如何使用AngularJS的事件传播机制,即`$on`、`$broadcast`和`$emit`,来实现这一功能。 首先,让我们了解`Controller`在AngularJS中的地位。Controller是模型(Model)和视图(View)之间的纽带...
2.message for angular, different with $scope.$emit/$broadcast 3.use single service(like message center) to register and send. 3.currently support promise and mulit message. 4.more demo can see app.js ...
3. 使用$dispatch和$broadcast进行事件派发和广播 在Vue实例中,子组件可以通过$dispatch沿着父链向上派发事件,而父组件可以通过$broadcast将事件向下广播给所有后代组件。这种方式在Vue2.0之后已经不推荐使用。 4...
- **无直接关联的控制器**:可以利用 `$rootScope` 使用 `$emit` 和 `$broadcast` 来传递数据。 - **父控制器到子控制器**:父控制器使用 `$scope.$broadcast()` 方法广播数据,子控制器通过 `$scope.$on()` 方法...
在 Vue2.0 中,可以使用 `$emit`、`$on` 和 `$off` 三个方法来实现事件的广播和接收。`$emit` 方法用于触发事件,`$on` 方法用于监听事件,`$off` 方法用于取消监听事件。 官方推荐的升级建议是使用集中事件处理器...
AngularJS提供了 `$emit`、`$broadcast` 和 `$on` 三个方法来处理事件。 1. **$emit** 用于**向上冒泡**事件,即从当前作用域向其父作用域传播事件。这通常用于子控制器向父控制器传递信息。例如: ```javascript...
在Vue 2.0中,$dispatch和$broadcast已经被弃用,官方文档中建议使用事件中心来实现非父子组件的通信。 首先,我们需要了解什么是Bus。Bus是一种事件分发机制,它允许组件之间进行通信。我们可以通过实例化一个空的...