angularjs的事件 $broadcast and $emit and $on
angularjs的事件 $broadcast and $emit and $on
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body ng-app="search">
<div ng-controller="ParentCtrl">
<div ng-controller="SelfCtrl">
<a class="btn" ng-click="click()">click me</a>
<div ng-controller="ChildCtrl"></div>
</div>
<div ng-controller="BroCtrl"></div>
</div>
<script src="angular.min.js"></script>
<script>
var search = angular.module('search', [])
.controller('ParentCtrl', function($scope) {
$scope.$on('to-child', function(e, d) {
console.log('关我毛事')
})
$scope.$on('to-parent', function(e, d) {
console.log('we are the parent, I got it', d)
})
})
.controller('SelfCtrl', function($scope) {
$scope.click = function () {
$scope.$broadcast('to-child', 'haha') // 向子
$scope.$emit('to-parent', 'hehe') // 向父
}
})
.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the child, I got it', d)
})
$scope.$on('to-parent', function(e, d) {
console.log('关我毛事')
})
})
.controller('BroCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('关我毛事')
})
$scope.$on('to-parent', function(e, d) {
console.log('关我毛事')
})
})
</script>
</body>
</html>
angularjs的事件 $broadcast and $emit and $on的更多相关文章
- angularjs事件通信$on，$emit，$broadcast详解
公司项目开发用的是angularjs,关于事件通讯一直用的是EventBus,直到上周写一个小组件懒得引用EventBus时,想到用angularjs自带的事件通信时,结果很尴尬的忘记原生方法单词怎么 ...
- angularJS控制器之间的相互通信方式、$broadcast、$emit、$on
在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2) ...
- angularjs事件传递$on、$emit和$broadcast
如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...
- 通过$broadcast或$emit在子级和父级controller之间进行值传递
通过$broadcast或$emit在controller之间进行值传递,不过这些controller必须是子级或者父级关系, $emit只能向父级parent controller传递事件event ...
- angular之$broadcast、$emit、$on传值
文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta ...
- Angular中$broadcast和$emit的使用方法
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应. broadcast译为广播,即上级传递下级. 示例代码: < ...
- AngularJS的学习--$on、$emit和$broadcast的使用
AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$ro ...
- AngularJS 事件广播与接收 $emit $broadcast $on
AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...
- angularJS 系列（六）---$emit(), $on(), $broadcast()的使用
下面以一个例子来讲述 angular 中的event system,有$emit(), $on(), $broadcast().效果图如下 下面的代码中,用到了 controller AS 的语法,具 ...
随机推荐
- Python学习_从文件读取数据和保存数据
运用Python中的内置函数open()与文件进行交互 在HeadFirstPython网站中下载所有文件,解压后以chapter 3中的“sketch.txt”为例: 新建IDLE会话,首先导入os ...
- 别让emacs损伤你的小母指
刚接触emacs时感觉,这东西怎么这么难用,还说是编辑器的神,我去. 写个代码跟挫游戏机手柄似的,关键是还这么难挫,平时用的最多的左ctrl键,这么难按,可怜的我的小母指(Petyr Baelish) ...
- c语言随机数
写得我自己都看不好了:大家都比较喜欢吃快餐,只需要尽快告诉读者怎么用起来就行了.不想听啰啰嗦嗦说一堆,然后例程还特别麻烦 so: 1.基本 int seed = time(0);//#include ...
- OnDrawGizmos函数
如果你想绘制可被点选的gizmos,执行这个函数. 这允许你在场景中快速选择重要的物体. 注意: OnDrawGizmos使用相对鼠标坐标 using UnityEngine; using Syste ...
- webx学习笔记
Webx学习笔记周建旭 2014-08-01 Webx工作流程 图 3.2. Webx Framework如何响应请求 当Webx Framework接收到一个来自WEB的请求以后,实际上它主要做了两 ...
- R语言编程艺术# 数据类型向量（vector）
R语言最基本的数据类型-向量(vector) 1.插入向量元素,同一向量中的所有的元素必须是相同的模式(数据类型),如整型.数值型(浮点数).字符型(字符串).逻辑型.复数型等.查看变量的类型可以用t ...
- ArcGIS Engine实现LAS数据集转RASTER
ArcGIS 10.1版本开始提供了将LAS数据集转换为栅格的新功能,最近在做LAS数据处理时通过ArcGIS Engine10.1+C#实现了LAS数据集转RASTER,既然ArcGIS DeskT ...
- 1047: [HAOI2007]理想的正方形 - BZOJ
Description 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小.Input 第一行为3个整数,分别表示a,b,n的值第二行至第a ...
- 1187: [HNOI2007]神奇游乐园 - BZOJ
Description 经历了一段艰辛的旅程后,主人公小P乘坐飞艇返回.在返回的途中,小P发现在漫无边际的沙漠中,有一块狭长的绿地特别显眼.往下仔细一看,才发现这是一个游乐场,专为旅途中疲惫的人设计. ...
- unity 3d 获取鼠标当前坐标
获取当前鼠标position:Input.mousePosition;