angularjs学习:事件
为什么80%的码农都做不了架构师?>>>
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赋的值,只能父级得到;而平级的什么都不能得到。
转载于:https://my.oschina.net/haoqoo/blog/422265
angularjs学习:事件相关推荐
- AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...
- angularjs学习总结 详细教程
本文详细讲解了前言.AngularJS概述.AugularJS特性.功能介绍.功能演示.功能演示.AngularJS进阶.总结七部分,可能会与原文略有不同. 不理解请看原文(尤其是代码部分),本文仅供 ...
- 转: angularjs学习总结(~~很详细的教程)
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- angularjs学习总结 详细教程(转载)
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- angularjs学习总结(资料收集)
angularjs学习总结(资料收集) 原文地址https://blog.csdn.net/weixin_33178524/article/details/79179597 1 前言 前端技术的发展是 ...
- 开启AngularJS学习之旅
AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). AngularJS 学习起 ...
- 我的AngularJS学习轨迹
开始接触Anguljar可能是在2013年初,那个时候的版本1.0.*,那个时候国内主要的中文资料AngularJS学习笔记:http://zouyesheng.com/angular.html,an ...
- 推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
- React学习:事件绑定、组件定义、for、map循环-学习笔记
文章目录 React学习:事件绑定.组件定义.for.map循环-学习笔记 事件绑定 组件定义 (参数传递) for.map循环 React学习:事件绑定.组件定义.for.map循环-学习笔记 事件 ...
- 【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
最新文章
- 火狐浏览器pentadatyl插件的基本设置
- 编程方法学8:信息隐藏
- html中的expand属性,expand的用法总结大全
- 每天一点点之 taro 框架开发 - taro路由及传参
- 腾讯云区块链产品负责人邵兵:产业区块链刚刚起步,做好基础设施才有可能进入2.0阶段
- 压力测试工具Siege详解
- 流畅的python学习记录——第五章:一等函数
- 软件测试面试题:微信红包如何测试?
- 利用PLC1200和elmo驱动器对maxon RE40电机的两种控制方式(PWM(PTO)或者模拟量控制)
- 初级产品经理的日常工作流程汇总
- p6spy mysql8_druid数据源集成p6spy踩坑
- Axure原型分享:可视化统计图表
- CMake 编译时出现错误 coffe转换到 COFF 期间失败: 文件无效或损坏
- js 骂人不带脏字 (!(~+[]) + {})[--[~+][+[]] * [~+[]] + ~~!+[]] + ({} + [])[[~!+[]] * ~+[]] 图解...
- 无效的m3u8怎么办_你还在为m3u8文件如何转换而发愁?看了我就有答案了
- 我在国企做软件开发这4年。。
- 如何打造高绩效的研发团队
- 一些符号及颜色的英语写法总结
- KITTI数据集下载(百度云)
- 如何利用市场细分方法构建更好的预测模型?