文档章节

angularjs学习:事件

Jack_Q
 Jack_Q
发布于 2015/05/29 15:45
字数 249
阅读 999
收藏 8

angular事件系统并不与浏览器的事件系统相通,这意味着,我们只能在作用域上监听Angular事件而不是DOM事件。

angular事件传播:在嵌套的controller作用域链上是可以向下传播($broadcast)和向上传播($emit)。

<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>  

.controller('SelfCtrl', function($scope) {  
$scope.click = function () {  
$scope.$broadcast('to-child', 'child');  
$scope.$emit('to-parent', 'parent');  
}  
});  
.controller('ParentCtrl', function($scope) {  
$scope.$on('to-parent', function(d,data) {  
console.log(data); //父级能得到值  
});  
$scope.$on('to-child', function(d,data) {  
console.log(data); //子级得不到值  
});  
});  
.controller('ChildCtrl', function($scope){  
$scope.$on('to-child', function(d,data) {  
console.log(data); //子级能得到值  
});  
$scope.$on('to-parent', function(d,data) {  
console.log(data); //父级得不到值  
});  
});  
.controller('BroCtrl', function($scope){  
$scope.$on('to-parent', function(d,data) {  
console.log(data); //平级得不到值  
});  
$scope.$on('to-child', function(d,data) {  
console.log(data); //平级得不到值  
});  
});
用$broadcast赋的值,只能子级得到值;$emit赋的值,只能父级得到;而平级的什么都不能得到。

© 著作权归作者所有

Jack_Q

Jack_Q

粉丝 13
博文 49
码字总数 9557
作品 1
武汉
架构师
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
204
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
2018/06/02
0
0
探索angular源码--启动(1)

前言 angular2.0已经出来了,本来应该是研究最新的angular源码,但毕竟用了angular1这么久了,一直对其源码实现十分好奇,再加上研究源码主要目的是学习,版本不是特别重要,因此就1.3版源码...

烽穹寒渊
2015/08/01
0
0
成为优秀Angular开发者所需要学习的19

一款to-do app基本等同于前端开发的“Hello world”。虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已。 Angular看起来似乎总是在改变和更新 - 但实际上,...

京东云技术新知
07/02
54
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 不要在领导修风扇的时候打开电扇

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :《Whats Up》 主唱妹子 Lina Perry 的嗓音实在太有力了,收放自如的自信才能唱出这么优秀的歌吧!#今日歌曲推荐# 《Whats Up》-...

小小编辑
今天
7
0
SpringBoot集成Elasticsearch并进行增删改查操作

一、创建工程 使用IntelliJ创建SpringBoot工程 SpringBoot版本为2.0.4 ElasticSearch为5.6.10 删掉蓝框中的文件(如上) 最后我们的目录结构(如下) 下面pom文件主要修改的是把spring boot从Int...

一字见心
今天
5
0
x001-版本介绍

python版本介绍 目前有2 和 3 有很多企业用的代码是2版本,随着技术的发展,以后用3的会成为大趋势 python3的安装 yum -y install wget gcc zlib-devel bzip2-devel openssl-devel ncurses-d...

侠客行之石头
今天
5
0
聊聊rocketmq的TransientStorePool

序 本文主要研究一下rocketmq的TransientStorePool TransientStorePool rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/TransientStorePool.java publi......

go4it
昨天
6
0
笔记

场外借贷, 质押 ,托管, 永续合约. 场外借贷,n签合同. 新功能 证券交易组负责中信证券机构及个人投资交易相关系统,服务机构及个人投资客户, 涉及到两融、期权、 期货、做市等境内境外创新业...

MtrS
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部