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 的语法,具 ...
随机推荐
- 四个基数任意次数组合相加得到一个数N，求所有可能组合
#include <iostream> #include <vector> usingnamespace std; vector<int> vec; constin ...
- 开博第一篇：DHT 爬虫的学习记录
经过一段时间的研究和学习,大致了解了DHT网络的一些信息,大部分还是参会别人的相关代码,一方面主要对DHT爬虫原理感兴趣,最主要的是为了学习python,大部分是别人的东西原理还是引用别人的吧 DHT ...
- Python通过Manager方式实现多个无关联进程共享数据
Python官方文档 Python实现多进程间通信的方式有很多种,例如队列,管道等. 但是这些方式只适用于多个进程都是源于同一个父进程的情况. 如果多个进程不是源于同一个父进程,只能用共享内存,信号量 ...
- 解决WPF图片模糊最佳方法（绑定PixelWidth与PixelHeight）
从事WPF开发一年有余,对于图片显示模糊相信很多人都遇到过.网络上查找能得到一堆解决方法,但都是会带来其他负面影响得不到最佳效果.其实,有些图片会因为垂直分辨率/水平分辨率不同而造成在WPF界面上显示 ...
- （转）Qt Model/View 学习笔记 (二)——Qt Model/View模式举例
Qt Model/View模式举例 Qt提供了两个标准的models:QStandardItemModel和QDirModel.QStandardItemModel是一个多用途的model,可用于表示 ...
- oracle中的隐式提交（auto commit）
通常我们执行sql或pl/sql时,需要我们手工提交.这样才能使所做的更改永久保存到数据库. 但有时即使我们没有在sql或pl/sql中发出commit命令,所做的更改也会被提交.这种提交是在某些特定 ...
- ASP.NET中POST数据并跳转页面
需求:先Post提交数据,然后跳转到目标页面 找了好久才发现这个神奇的类HttpHelper.原理很简单,利用html的from表单拼接,然后执行 使用方法: NameValueCollection ...
- parsing html in asp.net
http://stackoverflow.com/questions/5307374/parsing-html-page-in-asp-net http://htmlagilitypack.codep ...
- REST Design Concerns
Less Requests, More data; one of the core RESTful API design paradigms is the concept of less API re ...
- 基于注解风格的Spring-MVC的拦截器
基于注解风格的Spring-MVC的拦截器 Spring-MVC如何使用拦截器,官方文档只给出了非注解风格的例子.那么基于注解风格如何使用拦截器呢? 基于注解基本上有2个可使用的定义类,分别是Defa ...