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 的语法,具 ...
随机推荐
- WebApi中帮助页Description的中文显示
转自:http://edi.wang/post/2013/10/28/auto-generate-help-document-aspnet-webapi 我选择Web API的一个重要原因就是因为可以 ...
- 自定义UICollectionViewLayout并添加UIDynamic - scorpiozj(转)
转载自:http://www.tuicool.com/articles/jM77Vf 自定义UICollectionViewLayout并添加UIDynamic UICollectionVie ...
- Jquery异步请求简单实例(转)
本文引用自Xingsoft. 一.Jquery向aspx页面请求数据 前台页面JS代码: $("#Button1").bind("click&qu ...
- 慎用ReentrantLock
前言: 代码简洁与性能高效无法两全其美,本文章专注于并发程序的性能,如果您追求代码简洁,本文章可能不太适合,本文章属于Java Concurrency in Practice读书笔记. 在java5中 ...
- C#设计模式学习资料--外观模式
http://www.cf17.com/html/article/172.html http://blog.csdn.net/scucj/article/details/1374657 http:// ...
- python 知识 rstrip,strip,lstrip
rstrip,strip,lstrip 作用:去除字符串中的空格或指定字符 一.默认用法:去除空格str.strip() : 去除字符串两边的空格str.lstrip() : 去除字符串左边的空格s ...
- 1054: [HAOI2008]移动玩具 - BZOJ
Description 在一个4*4的方框内摆放了若干个相同的玩具,某人想将这些玩具重新摆放成为他心中理想的状态,规定移动时只能将玩具向上下左右四个方向移动,并且移动的位置不能有玩具,请你用最少的移动 ...
- 解决WIN8 磁盘100 活动占用100% win8硬盘一直响
一.先看最终效果: 二.再说解决办法: 1.任务管理器关闭进程 taskhost.exe和类似于taskhostxx.exe开头的进程. 2.在电源管理里面设置2分钟不使用硬盘则关闭硬盘,看我的截 ...
- spark storage之SparkEnv
此文旨在对spark storage模块进行分析,整理自己所看所得,等以后再整理. ok,首先看看SparkContext中sparkEnv相关代码: private[spark] def creat ...
- 探讨read的返回值的三种情况
http://blog.chinaunix.net/uid-23629988-id-3035613.html 今天探讨一个很看似简单的API “read”的返回值问题.read的返回值有哪几个值?每个 ...