<!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. solidity学习-cryptoPunks为实例

    在这里使用cryptoPunks为实例来进行solidity的介绍,一般这些内容理解了就能够进行相对简单的智能合约的编写了,同时会添加一些我认为也十分重要的内容学习文档为http://solidity ...

  2. PAT A1134 Vertex Cover （25 分）——图遍历

    A vertex cover of a graph is a set of vertices such that each edge of the graph is incident to at le ...

  3. django_redis作为 session backend 使用配置

    Django 默认可以使用任何 cache backend 作为 session backend, 将 django-redis 作为 session 储存后端不用安装任何额外的 backend # ...

  4. SQL中char、varchar、nvarchar、ntext的区别（转载）

    char    char是定长的,也就是当你输入的字符小于你指定的数目时,char(8),你输入的字符小于8时,它会再后面补空值.当你输入的字符大于指定的数时,它会截取超出的字符.nvarchar(n ...

  5. Luogu3320 SDOI2015 寻宝游戏 链并

    传送门 可以发现从哪里开始的最优答案都是一样的.我们只需要用一种比较好维护的方法维护答案就好了. 我们考虑用$dfs$序加上$set$维护链并.先预处理$dfs$序,将当前有宝藏的点丢入$set$中, ...

  6. POJ Remmarguts' Date

    题目链接-> 题解: 次短路模板. 代码: #include<cstdio> #include<iostream> using namespace std; #defin ...

  7. P4099 [HEOI2013]SAO

    P4099 [HEOI2013]SAO 贼板子有意思的一个题---我()竟然没看题解 有一张连成树的有向图,球拓扑序数量. 树形dp,设\(f[i][j]\)表示\(i\)在子树中\(i\)拓扑序上排 ...

  8. SQL调优日记--并行等待的原理和问题排查

    概述 今天处理项目,客户反应数据库在某个时间段,反应特别慢.需要我们提供一些优化建议. 现象 由于是特定的时间段慢,排查起来就比较方便.直接查看这个时间段数据库的等待情况.查看等待类型发现了大量的CX ...

  9. c#通用配置文件读写类与格式转换（xml,ini,json）

    .NET下编写程序的时候经常会使用到配置文件.配置文件格式通常有xml.ini.json等几种,操作不同类型配置文件需要使用不同的方法,操作较为麻烦.特别是针对同时应用不同格式配置文件的时候,很容易引 ...

  10. 谈谈css伪类与伪元素

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...