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的更多相关文章

  1. angularjs事件通信$on,$emit,$broadcast详解

    公司项目开发用的是angularjs,关于事件通讯一直用的是EventBus,直到上周写一个小组件懒得引用EventBus时,想到用angularjs自带的事件通信时,结果很尴尬的忘记原生方法单词怎么 ...

  2. angularJS控制器之间的相互通信方式、$broadcast、$emit、$on

    在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2) ...

  3. angularjs事件传递$on、$emit和$broadcast

    如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...

  4. 通过$broadcast或$emit在子级和父级controller之间进行值传递

    通过$broadcast或$emit在controller之间进行值传递,不过这些controller必须是子级或者父级关系, $emit只能向父级parent controller传递事件event ...

  5. angular之$broadcast、$emit、$on传值

    文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta ...

  6. Angular中$broadcast和$emit的使用方法

    要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应. broadcast译为广播,即上级传递下级. 示例代码: < ...

  7. AngularJS的学习--$on、$emit和$broadcast的使用

    AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$ro ...

  8. AngularJS 事件广播与接收 $emit $broadcast $on

    AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...

  9. angularJS 系列(六)---$emit(), $on(), $broadcast()的使用

    下面以一个例子来讲述 angular 中的event system,有$emit(), $on(), $broadcast().效果图如下 下面的代码中,用到了 controller AS 的语法,具 ...

随机推荐

  1. Ubuntu系统启动时waiting for network

    最近在使用Ubuntu时启动经常会遇到等待网络配置, 每次等待时间都很长,要几分钟,于是在网上看看其他大牛怎么解决该问题. 有些解决方法中有提到删除 网卡硬件信息文件/etc/udev/rules.d ...

  2. 【dapper】.net平台下的框架

    http://www.cnblogs.com/yipu/archive/2012/11/21/2780199.html Method Duration Remarks Hand coded (usin ...

  3. linux配置JDK(转载)

    转载自:http://blog.csdn.net/xinxin19881112/article/details/46816385 Linux CentOS 6.6安装JDK1.7 目录 1.下载JDK ...

  4. UI元素的相对自适应

    什么是UI元素的相对自适应 UI元素的相对自适应,顾名思义,是指两个UI元素之间保持一种相对的位置不要变化,例如,UI元素A永远处于UI元素B右边的50像素处位置.再比如,一个UI背景框,不论屏幕尺寸 ...

  5. 跨过slf4j和logback,直接晋级log4j 2

    今年一直关注log4j 2,但至今还没有出正式版.等不及了,今天正式向大家介绍一下log4j的升级框架,log4j 2. log4j,相信大家都熟悉,至今对java影响最大的logging系统,至今仍 ...

  6. 【Linux】设定一个能输入中文的英文环境!

    引子:centos startx 进入桌面后使用中文输入法 这个解决方法太蠢了,而且只适用于centos等red系系统... 在此提供一个更加通用的方法 => 只要设置好系统的locale坏境变 ...

  7. vim查看函数原型以及关闭窗口

    问题描述:         vim中查看函数原型,以及关闭vim窗口 问题解决:      (1)查看函数原型            使用Shift+K可以查看用户手册      (2)自定义函数   ...

  8. uva 10940

    数学 打了个表 找一下规律.... #include <cstdio> int a[30]; void init() { a[1]=2;a[2]=4;a[3]=8;a[4]=16;a[5] ...

  9. Unity3D的几种坐标系

    原地址:http://www.cnblogs.com/martianzone/p/3371789.html http://www.cnblogs.com/88999660/archive/2013/0 ...

  10. linux ubuntu关于U盘的安装 开机启动u盘的时候出现/casper/vmlinuz.efi: file not found

    将u盘下的/casper/vmlinuz文件添加一个后缀.efi即可. 重启再装.