通过$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 ...
随机推荐
- CF920E Connected Components?
CF luogu 先讲两个靠谱的做法 1.首先因为有n个点,m条不存在的边,所以至少存在一个点,和m/n个点之间没边,所以把这个点找出来,连一下其他相连的点,这样还剩m/n个点没确定在哪个联通块,而这 ...
- Json转Hashtable的转换
json 转换为Hashtable /// <summary> /// Json转Hashtable /// </summary> /// <param name=&qu ...
- python后端将svc文件数据读入数据库具体实现
如何用python将svc文件的数据读入到MySQL数据库里,在此直接上代码了,感兴趣的朋友可以贴代码测试: import pandas as pd import os from sqlalchemy ...
- jQuery.rotate.js笔记
1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...
- A - Arcade Game Gym - 100814A (概率思维题)
题目链接:https://cn.vjudge.net/contest/285964#problem/A 题目大意:每一次给你你一个数,然后对于每一次操作,可以将当前的数的每一位互换,如果互换后的数小于 ...
- Discuz!X 3.4 前台任意文件删除漏洞复现
Discuz!X 3.4 前台任意文件删除漏洞复现 参考链接: http://www.freebuf.com/vuls/149904.html http://www.freebuf.com/artic ...
- linux 文件处理命令
- ubuntu14.04安装Anaconda
1 安装anaconda 为了安装python等各种依赖包,我安装了Anaconda工具包,在清华源下载了Anaconda的镜像 1.1 下载anaconda 如果用python2.7,就下载An ...
- SpringSocial业务系统与社交网站的绑定与解绑
SpringSocial提供了了以下三个服务,我们要做的仅仅是调用它们的服务,但是SpringSocial仅仅只提供了数据,没有提供视图 ⒈拿到所有社交网站与业务系统的绑定信息 SpringSocia ...
- linux+php实现定时任务[链接]
1.crontab 详细用法 定时任务 https://www.cnblogs.com/aminxu/p/5993769.html 2.查看crontab日志 https://www.cnblogs. ...