<!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. java实现文件监控

    文件监控器: package testfile; import org.apache.commons.io.monitor.FileAlterationListenerAdaptor; import ...

  2. JavaScript高级程序设计学习(三)之变量、作用域和内存问题

    这次讲的主要是变量,作用域和内存问题. 任何一门编程语言,都涉及这三个. 变量,比如全局变量,局部变量等,作用域,也分全局作用域和方法作用域,内存问题,在java中就涉及到一个垃圾回收的问题,由于ja ...

  3. MyBatis+Hibernate+JDBC对比分析

    MyBatis目前作为持久层,用的最多,因为它符合互联网开发的变动性,实际开发中需求总会有这样的,那样的变动,MyBatis虽然没有Hibernate那么全自动化,而且对于开发人员的sql能力要求比较 ...

  4. vue将表格导出为excel

    vue将表格导出为excel 一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <templat ...

  5. MySQL 基础七 视图

    -- 查看表 SELECT * FROM student; SHOW CREATE TABLE student; -- 创建视图 CREATE VIEW v_student1 AS SELECT *F ...

  6. linux中断源码分析 - 初始化(二)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 本篇文章主要讲述源码中是如何对中断进行一系列的初始化的. 回顾 在上一篇概述中,介绍了几个对于中断来说非常重要的 ...

  7. SQL Server聚合函数与聚合开窗函数 （转载）

    以下面这个表的数据作为示例. 什么是聚合函数?聚合函数:聚合函数就是对一组值进行计算后返回单个值(即分组).聚合函数在计算时都会忽略空值(null).所有的聚合函数均为确定性函数.即任何时候使用一组相 ...

  8. Luogu4697 CEOI2011 Balloons 单调栈

    传送门 题意:给出$N$个气球,从左往右给出它们的$x_i$与$r_i$.现在从左往右给它们充气,每一个气球在充气的过程中始终在$x_i$点与地面相切,且最大半径为$r_i$.如果在充气的过程中气球与 ...

  9. dpkg打包与解包

    1.打包 dpkg -b 2.解包 2.1 dpkg -X 解出包内容 2.2 dpkg -e 输出包控制信息

  10. JVM规范系列第2章：Java虚拟机结构

    本规范描述的是一种抽象化的虚拟机的行为,而不是任何一种(译者注:包括 Oracle 公司自己的 HotSpot 和 JRockit 虚拟机)被广泛使用的虚拟机实现. 记住:JVM规范是一种高度抽象行为 ...