通过$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 ...
随机推荐
- 【Thymeleaf】Thymeleaf模板对没有结束符的HTML5标签解析出错的解决办法
解决方案 spring: thymeleaf: mode: LEGACYHTML5 <dependency> <groupId>net.sourceforge.nekohtml ...
- Spring Boot Endpoint
Spring Boot 的 Endpoints 带着强烈的 DevOps 色彩, “you build it, you run it” ,开发不仅要关心如何实现功能,还需要关心服务在线上运行的状态,如 ...
- JSR
JSR是Java Specification Requests的缩写,意思是Java 规范提案.是指向JCP(Java Community Process)提出新增一个标准化技术规范的正式请求.任何人 ...
- MySQL语法错误
[2017-02-18 15:53:44] [42000][1064] You have an error in your SQL syntax; check the manual that corr ...
- Coconuts HDU - 5925 (二维离散化求连通块的个数以及大小)
题目链接: D - Coconuts HDU - 5925 题目大意:首先是T组测试样例,然后给你n*m的矩阵,原先矩阵里面都是白色的点,然后再输入k个黑色的点.这k个黑色的点可能会使得原先白色的点 ...
- K - Subarrays OR Gym - 102152K (思维)
题目链接: K - Subarrays OR Gym - 102152K 题目大意:T组测试样例,然后n个数,让你求每一个l,r中有多少个不同的异或值. 具体思路: 对于(1,i)这个区间, 我们当前 ...
- Javascript - ExtJs - 组件 - 分页
服务端只需要返回如下格式的字符串,ExtJs就可以解析并自动生成分页数据. , name: "sam" } ] } 准备: CREATE PROCEDURE [dbo]. ...
- 20165234 [第二届构建之法论坛] 预培训文档(Java版) 学习总结
[第二届构建之法论坛] 预培训文档(Java版) 学习总结 我通读并学习了此文档,并且动手实践了一遍.以下是我学习过程的记录~ Part1.配置环境 配置JDK 原文中提到了2个容易被混淆的概念 JD ...
- 贝叶斯优化(Bayesian Optimization)深入理解
目前在研究Automated Machine Learning,其中有一个子领域是实现网络超参数自动化搜索,而常见的搜索方法有Grid Search.Random Search以及贝叶斯优化搜索.前两 ...
- better-scroll和swiper使用中的坑
better-scroll 1.我的 better-scroll 初始化了, 但是没法滚动. 按照文档使用后,发现可以原生滚动,但是不能弹性滑动,后面发现是最外层容器没给设置固定高度 ,设置固定 ...