<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <script src="js/angular.js"></script>
  <title></title>
</head>
<body>

<div ng-controller="parentCtrl">
  <button ng-click="toChild()">
    向child传值
  </button>

  <div ng-controller="childCtrl">
    <p>{{data}}</p>
    <button ng-click="toParent()">向parent传值</button>
  </div>

</div>

<script>
  var app = angular.module('myApp', ['ng']);

  app.controller('parentCtrl', function ($scope) {
    $scope.toChild = function () {
      //通过事件传值 约定事件名称：toChildEvent
      $scope.$broadcast(
        'toChildEvent',
        ' msg from parent')
    }

    //绑定toParentEvent事件的处理函数
    $scope.$on('toParentEvent',
      function (event, result) {
        console.log(result);
      })

  });

  app.controller('childCtrl', function ($scope) {
    //绑定事件 $on
    $scope.$on('toChildEvent',
      function (event, result) {
        console.log(arguments);
        $scope.data = result;
      });

    $scope.toParent = function () {
      //向父级元素通过事件传值 $emit 约定:toParentEvent
      $scope.$emit(
        'toParentEvent',
        'msg to my parent'
      );
    }

  });

</script>
</body>
</html>

Angular $broadcast和$emit和$ond实现父子通信的更多相关文章

  1. angularjs的事件 $broadcast and $emit and $on

    angularjs的事件 $broadcast and $emit and $on <!DOCTYPE html> <html> <head> <meta c ...

  2. 通过$broadcast或$emit在子级和父级controller之间进行值传递

    通过$broadcast或$emit在controller之间进行值传递,不过这些controller必须是子级或者父级关系, $emit只能向父级parent controller传递事件event ...

  3. angular之$broadcast、$emit、$on传值

    文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta ...

  4. angularJS控制器之间的相互通信方式、$broadcast、$emit、$on

    在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2) ...

  5. Angular中$broadcast和$emit的使用方法

    要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应. broadcast译为广播,即上级传递下级. 示例代码: < ...

  6. angular,vue,react的父子通信

    父子通信 父传子 vue: 父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据 子 ...

  7. vue 父子通信过程

    1.概述 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件 2.示例一(未传递 ...

  8. vue父子通信的基本使用

    项目中没怎么用过父子通信,很多页面都是路由切换实现的,后来做首页的时候发现首页的路径没法配置,我强行在原先的首页上写了个子组件,通过判断路径使其强行跳转实现的 这个时候跳转页面的时候就要使用到了父子间 ...

  9. vue之非父子通信

    一.非父子通信: 思路: 找个中间存储器,组件一把信息放入其中,组件二去拿 代码如下: let hanfei = new Vue();  # 实列化个空的vue对象,作为中间存储器来时间        ...

随机推荐

  1. 1 C++ 线程

    #include "iostream" //#include "thread" //头文件一般不加入,复制到别的文件,导致命名冲突 //总增加 //using ...

  2. solidity ecrecover

    https://solidity.readthedocs.io/en/latest/units-and-global-variables.html#mathematical-and-cryptogra ...

  3. leetcode 199. Binary Tree Right Side View 、leetcode 116. Populating Next Right Pointers in Each Node 、117. Populating Next Right Pointers in Each Node II

    leetcode 199. Binary Tree Right Side View 这个题实际上就是把每一行最右侧的树打印出来,所以实际上还是一个层次遍历. 依旧利用之前层次遍历的代码,每次大的循环存 ...

  4. Python Tornado集成JSON Web Token方式登录

    本项目github地址 前端测试模板如下: Tornado restful api 项目 项目结构如下: 项目组织类似于django,由独立的app模块构成. 登录接口设计 模式:post -> ...

  5. Android学习之Button按钮在程序运行时全部变大写的处理

    问题: 在layout布局文件中,我们命名的按钮名称是“button1”,程序运行过后,在app上显示出来的是“BUTTON1”,先看源代码和效果: 按钮源代码: 运行效果: 解决办法: 方法一: 在 ...

  6. 浅谈Java泛型中的extends和super关键字

    泛型是在Java 1.5中被加入了,这里不讨论泛型的细节问题,这个在Thinking in Java第四版中讲的非常清楚,这里要讲的是super和extends关键字,以及在使用这两个关键字的时候为什 ...

  7. Crowdsourcing[智能辅助标注]

    为了实现标注平台智能辅助标注的能力,即上传一个标注任务,开始不提供辅助任务,随着用户标注的进行,后台可以收集一部分的标记数据,然后开启模型训练,并接着提供模型服务功能.然后再收集数据,再不断的训练,然 ...

  8. [02] URL和HttpURLConnection类

    1.URL的概念 统一资源定位符URL(Uniform Resource Locator)是www客户机访问Internet时用来标识资源的名字和地址. URL的基本格式是: <METHOD&g ...

  9. 液晶屏MIPI接口与LVDS接口区别（总结）

    液晶屏接口类型有LVDS接口.MIPI DSIDSI接口(下文只讨论液晶屏LVDS接口,不讨论其它应用的LVDS接口,因此说到LVDS接口时无特殊说明都是指液晶屏LVDS接口),它们的主要信号成分都是 ...

  10. Mybatis自动生成实体类

    Maven自动生成实体类需要的jar包 一.pom.xml中 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns ...