通过$broadcast或$emit在子级和父级controller之间进行值传递
通过$broadcast或$emit在controller之间进行值传递,不过这些controller必须是子级或者父级关系,
$emit只能向父级parent controller传递事件event与数据data,$broadcast只能向子级child controller传递event与data,$on用于接收event与data.
<script>
var myapp=angular.module('myapp',[]);
myapp.controller('SelfCtrl', function($scope) {
$scope.click = function () {
$scope.$emit('to-parent', 'parent');
$scope.$broadcast('to-child', 'child');
}
});//在当前控制器内,分别给父级控制器和子级控制器传递事件和数据 myapp.controller('ParentCtrl', function($scope) {
$scope.$on('to-parent', function(d,data) {
console.log(data); //父级控制器内监听上面控制器中$emit注册的事件和传递的值
});
$scope.$on('to-child', function(d,data) {
console.log(data); //父级控制器内监听不到上面控制器中$broadcast注册的事件和传递的值,因为$broadcast注册的事件和传递的值是给子级的控制器的
});
}); myapp.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(d,data) {
console.log(data); //同理
});
$scope.$on('to-parent', function(d,data) {
console.log(data); //同理
});
}); myapp.controller('BroCtrl', function($scope){
$scope.$on('to-parent', function(d,data) {
console.log(data); //平级得不到值,因为$broadcast或$emit只能给子级或父级controller传递事件和值
});
$scope.$on('to-child', function(d,data) {
console.log(data); //同理
});
}); </script> <body ng-app="myapp">
<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>
</body>
原文:http://blog.51yip.com/jsjquery/1602.html
通过$broadcast或$emit在子级和父级controller之间进行值传递的更多相关文章
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- Flutter路由跳转父级页面向子页面传参及子页面向父级页面传参
Flutter中页面通过路由跳转传参主要分两种,一种是通过push()跳转时根据设定的参数进行传参,另一种是通过pop()返回时进行传参. 父级页面向子页面push()传参 假设从A页面跳到B页面可能 ...
- Vue中利用$emit实现子组件向父组件通信
Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...
- Vue点到子路由,父级,无法高亮问题解决
[问题] Vue点到子路由,父级,无法高亮 [原因]多是因为链接简写相对路径没有写完整导致 [解决]把子路由的router-link的to属性里链接写完整.并把router配置文件里path也写完整即 ...
- 递归方式---通过子级id,获取子级和父级Name
#region 递归--返回 父级|子级 名称 #region --返回 父级|子级 名称 public string RetrurnTypeNames(string TypeId) { String ...
- angularjs $broadcast $emit $on 事件触发controller间的值传递
如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...
- Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on
$emit只能向parent controller传递event与data( $emit(name, args) ) $broadcast只能向child controller传递event与data ...
- Thinkcmf子栏目获取父级栏目所有子栏目列表
网站建设时经常需要输出某个栏目的子栏目,对应的在子栏目列表页也需要输出父级栏目的子栏目列表,thinkcmf可以输出所有子栏目,但却无法在子栏目列表页也适用, 因此就需要通过对数据库表查询来完成需求: ...
- php 无线分类 根据子级找父级
public function transform($item){ //查询数据 $position = AdminAccess::where('id',$item)->first(); $re ...
随机推荐
- ubuntu完全卸载mysql
可以先用 dpkg --list|grep mysql 查看自己的mysql有哪些依赖 一.先卸载 mysql-common sudo apt-get remove mysql-common 二.然后 ...
- mysql报错:Cause: com.mysql.jdbc.PacketTooBigException
报错信息: Error updating database. Cause: com.mysql.jdbc.PacketTooBigException: Packet for query is too ...
- 【blog】SpringMVC接收数组
页面 var idsArray = new Array(); idsArray.push(userId); SpringMVC @RequestParam(value = "ids[]&qu ...
- Mybatis-利用resultMap 输出复杂pojo
个:复杂的sql语句查询的数据集的字段和 pojo的字段不相同,需要用到resultMap做一个对应. ---------------- mybatis中使用resultMap完成高级输出结果映射. ...
- docker安装问题:E: Package 'docker-ce' has no installation candidate
我的环境是在vm虚拟机中,Ubuntu17.04 前期安装步骤不过多介绍,下面这个博客就很好 ubuntu16.10安装docker17.03.0-ce并配置国内源和加速器 http://www.cn ...
- 迅为-ARM嵌入式开发一体化工业9.7寸屏幕 平板式智能触控屏
产品名称:迅为9.7寸IPS高清屏幕 适用于:[iTOP-4412精英版][iTOP-4412全能版][iTOP-4418开发板][迅为-iMX6开发板] 分辨率:1024*768 触摸屏类型:电容屏 ...
- 20165237 2017-2018-2 《Java程序设计》第3周学习总结
20165237 2017-2018-2 <Java程序设计>第3周学习总结 教材学习内容总结 1.面向机器语言:类如汇编语言. 2.面向过程语言:类如C语言(但是相当于说话缺少主语). ...
- listView从底部回到顶部代码实现
可用如下方法: 1.平滑的回到顶部,但是会划过中间的每一页 mListView.getRefreshableView().smoothScrollToPosition(0); 2.直接跳到顶部 if ...
- protobuf 安装与卸载
方法一:可以FQ 安装 下载https://github.com/google/protobuf/releases ##Source code (zip)## ./autogen.sh ./confi ...
- NMON使用以及nmon_analyse生成分析报表
在我们监控我们的操作系统的时候如果可以把各个硬件的监控信息生成形象化的分析报表图对于我们来说是件太好的事情了,而通过ibm的nom和nmon_analyser两者的结合完全可以实现我们的要求.首先对n ...