<!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. tcpdump -i eth0 -n -vvv src or dst port 443

    tcpdump -i eth0 -n  -vvv src or dst port 443

  2. MATLAB——BP网络的设计

  3. AWS 为 Elasticsearch 推出开源发行版

    WS 近日宣布为 Elasticsearch 推出开源发行版 Open Distro for Elasticsearch. Elasticsearch 是一个分布式.面向文档的搜索和分析引擎,它支持结 ...

  4. Linux中进程与线程的概念以及区别

    linux进程与线程的区别,早已成为IT界经常讨论但热度不减的话题.无论你是初级程序员,还是资深专家,都应该考虑过这个问题,只是层次角度不同罢了.对于一般的程序员,搞清楚二者的概念并在工作中学会运用是 ...

  5. Luogu P1525 关押罪犯

    传送门 首先 这是一个并查集= = 这道题其实明白了还挺简单的qwq 思路: 因为只看仇恨值最大的一对儿,所以把他们从大到小排序,越大的就尽量分开,直到不能再分为止qwq q[x]表示x最大的敌人(x ...

  6. sql server使用的相关基础知识

    1.表的管理--表和列的命名 必须以字母开头 长度不能超过128字符 不要使用sql server的保留字 只能使用如下字符A-Z,a-z,0-9,$,#,_等等 2.表的管理--支持的数据类型 字符 ...

  7. JS-JS作用域问题

    一. js没有块级作用域(可以自己闭包或其他方法实现),只有函数级作用域,函数外面的变量函数里面可以找到,函数里面的变量外面找不到. var a=10; function fn(){ console. ...

  8. SpringBoot 异常处理

    异常处理最佳实践 根据我的工作经历来看,我主要遵循以下几点: 尽量不要在代码中写try...catch.finally把异常吃掉. 异常要尽量直观,防止被他人误解 将异常分为以下几类,业务异常,登录状 ...

  9. vue 结合mint-ui Message box的使用方法

    两种方式使用: 一.全局注册 1.在main.js中引入 //引入 import { MessageBox } from 'mint-ui';   //全局使用,挂载到原型上 Vue.prototyp ...

  10. Linux性能评测工具之一：gprof篇

    这些天自己试着对项目作一些压力测试和性能优化,也对用过的测试工具作一些总结,并把相关的资料作一个汇总,以便以后信手拈来! 1 简介 改进应用程序的性能是一项非常耗时耗力的工作,但是究竟程序中是哪些函数 ...