通过$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之间进行值传递的更多相关文章

  1. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  2. Flutter路由跳转父级页面向子页面传参及子页面向父级页面传参

    Flutter中页面通过路由跳转传参主要分两种,一种是通过push()跳转时根据设定的参数进行传参,另一种是通过pop()返回时进行传参. 父级页面向子页面push()传参 假设从A页面跳到B页面可能 ...

  3. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

  4. Vue点到子路由,父级,无法高亮问题解决

    [问题] Vue点到子路由,父级,无法高亮 [原因]多是因为链接简写相对路径没有写完整导致 [解决]把子路由的router-link的to属性里链接写完整.并把router配置文件里path也写完整即 ...

  5. 递归方式---通过子级id,获取子级和父级Name

    #region 递归--返回 父级|子级 名称 #region --返回 父级|子级 名称 public string RetrurnTypeNames(string TypeId) { String ...

  6. angularjs $broadcast $emit $on 事件触发controller间的值传递

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

  7. Angular中Controller之间的信息传递(第二种办法):$emit,$broadcast,$on

    $emit只能向parent controller传递event与data( $emit(name, args) ) $broadcast只能向child controller传递event与data ...

  8. Thinkcmf子栏目获取父级栏目所有子栏目列表

    网站建设时经常需要输出某个栏目的子栏目,对应的在子栏目列表页也需要输出父级栏目的子栏目列表,thinkcmf可以输出所有子栏目,但却无法在子栏目列表页也适用, 因此就需要通过对数据库表查询来完成需求: ...

  9. php 无线分类 根据子级找父级

    public function transform($item){ //查询数据 $position = AdminAccess::where('id',$item)->first(); $re ...

随机推荐

  1. 【Thymeleaf】Thymeleaf模板对没有结束符的HTML5标签解析出错的解决办法

    解决方案 spring: thymeleaf: mode: LEGACYHTML5 <dependency> <groupId>net.sourceforge.nekohtml ...

  2. Spring Boot Endpoint

    Spring Boot 的 Endpoints 带着强烈的 DevOps 色彩, “you build it, you run it” ,开发不仅要关心如何实现功能,还需要关心服务在线上运行的状态,如 ...

  3. JSR

    JSR是Java Specification Requests的缩写,意思是Java 规范提案.是指向JCP(Java Community Process)提出新增一个标准化技术规范的正式请求.任何人 ...

  4. MySQL语法错误

    [2017-02-18 15:53:44] [42000][1064] You have an error in your SQL syntax; check the manual that corr ...

  5. Coconuts HDU - 5925 (二维离散化求连通块的个数以及大小)

    题目链接: D - Coconuts  HDU - 5925 题目大意:首先是T组测试样例,然后给你n*m的矩阵,原先矩阵里面都是白色的点,然后再输入k个黑色的点.这k个黑色的点可能会使得原先白色的点 ...

  6. K - Subarrays OR Gym - 102152K (思维)

    题目链接: K - Subarrays OR Gym - 102152K 题目大意:T组测试样例,然后n个数,让你求每一个l,r中有多少个不同的异或值. 具体思路: 对于(1,i)这个区间, 我们当前 ...

  7. Javascript - ExtJs - 组件 - 分页

    服务端只需要返回如下格式的字符串,ExtJs就可以解析并自动生成分页数据.  , name: "sam" }     ] } 准备: CREATE PROCEDURE [dbo]. ...

  8. 20165234 [第二届构建之法论坛] 预培训文档(Java版) 学习总结

    [第二届构建之法论坛] 预培训文档(Java版) 学习总结 我通读并学习了此文档,并且动手实践了一遍.以下是我学习过程的记录~ Part1.配置环境 配置JDK 原文中提到了2个容易被混淆的概念 JD ...

  9. 贝叶斯优化(Bayesian Optimization)深入理解

    目前在研究Automated Machine Learning,其中有一个子领域是实现网络超参数自动化搜索,而常见的搜索方法有Grid Search.Random Search以及贝叶斯优化搜索.前两 ...

  10. better-scroll和swiper使用中的坑

    better-scroll  1.我的 better-scroll 初始化了, 但是没法滚动. 按照文档使用后,发现可以原生滚动,但是不能弹性滑动,后面发现是最外层容器没给设置固定高度   ,设置固定 ...