AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构。

其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app)，然后其他所有的作用域部分都是继承自这个$rootScope的，或者说都是嵌套在主作用域下面的。很多时候，你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么。

那么在这种情况下，如何在作用域之间通信呢？其中一个选择就是在应用程序作用域之中创建一个单例服务，然后通过这个服务处理所有子作用域的通信。

在AngularJS中还有另外一个选择：通过作用域中的事件处理通信。但是这种方法有一些限制。例如，你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。

$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。

发送消息： $scope.$emit(name, data) 或者 $scope.$broadcast(name, data);

区别： 

  • $emit只能向parent controller广播event与data
  • $broadcast只能向child controller广播event与data

接收消息： $scope.on(name,function(event,data){ });

$on 有两个参数function(event,msg)  第一个参数是事件对象，第二个参数是接收到消息信息

例子如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <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>

        <script>

            var app = angular.module('myApp', []);

            app.controller('SelfCtrl', function($scope) {

                $scope.click = function() {

                    $scope.$broadcast('to-child', 'child');

                    $scope.$emit('to-parent', 'parent');

                }

            });

            app.controller('ParentCtrl', function($scope) {

                $scope.$on('to-parent', function(event, data) {

                    console.log('ParentCtrl', data); //父级能得到值 ParentCtrl parent

                });

                $scope.$on('to-child', function(event, data) {

                    console.log('ParentCtrl', data); //子级得不到值

                });

            });

            app.controller('ChildCtrl', function($scope) {

                $scope.$on('to-child', function(event, data) {

                    console.log('ChildCtrl', data); //子级能得到值 ChildCtrl child

                });

                $scope.$on('to-parent', function(event, data) {

                    console.log('ChildCtrl', data); //父级得不到值

                });

            });

            app.controller('BroCtrl', function($scope) {

                $scope.$on('to-parent', function(event, data) {

                    console.log('BroCtrl', data); //平级得不到值

                });

                $scope.$on('to-child', function(event, data) {

                    console.log('BroCtrl', data); //平级得不到值

                });

            });

        </script>

    </body>

</html>

AngularJS 事件广播与接收 $emit $broadcast $on的更多相关文章

  1. angularJS 事件广播与接收[转]

    路由的事件 事件这个词在前端出现的频率真是高,根本拦不住,哪都是.$route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些不同的路由事件设置监听器并做出响应. 一共有4个事件用来监听路由的 ...

  2. angularJS 事件广播与接收

    发送消息: $scope.$emit(name, data) 或者 $scope.$broadcast(name, data); 接收消息: $scope.on(name,function(event ...

  3. AngularJS 事件广播与接收 $broadcast,$emit,$on 作用域间通信 封装factory服务 发布订阅

    不同作用域之间通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信. 一.说明 1.广播 $broadcast 说明:将事件从父级作用域传播至本作用域及子级作用域. 格式:$b ...

  4. Angularjs中的事件广播 —全面解析$broadcast,$emit,$on

    Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格 ...

  5. [spring源码学习]九、IOC源码-applicationEventMulticaster事件广播

    一.代码实例 回到第IOC的第七章context部分,我们看源码分析部分,可以看到在spring的bean加载之后的第二个重要的bean为applicationEventMulticaster,从字面 ...

  6. VB.net Wcf事件广播（订阅、发布）

    这篇东西原写在csdn.net上,最近新开通了博客想把零散在各处的都转移到一处.   一.源起 学WCF有一段时间了,可是无论是微软的WebCast还是其他网上的教程,亦或我购买的几本书中,都没有怎么 ...

  7. AngularJs 服务 广播

    1, angularJs的服务有provider,Service, Factory. Factory是对Service的封装,Service是对Provider的封装. Provide的源码如下: f ...

  8. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  9. laravel 事件广播

    Laravel 5.1 之中新加入了事件广播的功能,作用是把服务器中触发的事件通过websocket服务通知客户端,也就是浏览器,客户端js根据接受到的事件,做出相应动作.本文会用简单的代码展示一个事 ...

随机推荐

  1. 【前端积累】Awesome初识

    前言 之所以要看这个,是因为在看到的一个网站里图表显示的全屏和缩小,anyway ,还是看一下咯~ 一.介绍 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何 ...

  2. KMP算法的实现(Java语言描述)

    标签:it KMP算法是模式匹配专用算法. 它是在已知模式串的next或nextval数组的基础上执行的.如果不知道它们二者之一,就没法使用KMP算法,因此我们需要计算它们. KMP算法由两部分组成: ...

  3. 【Eclipse】启动时报错：No Java virtual machine （已解决）

    在 Ubuntu 上下了个最新的 Eclipse ,解压后运行报这样的错误: 当然 JDK 的安装及环境变量的配置是没有问题的.使用 java -version 查询本机的JDK版本是可以的. 如果不 ...

  4. 原生js--跨域消息传递

    跨域消息传递:postMessage() 1.兼容性问题:IE8及其以上浏览器和其它主流浏览器都已经支持 2.使用范围:跨iframe.跨页面.跨域 3.使用方法: 发送消息:postMessage( ...

  5. linux下文件描述符的介绍

    当某个程序打开文件时,操作系统返回相应的文件描述符,程序为了处理该文件必须引用此描述符.所谓的文件描述符是一个低级的正整数.最前面的三个文件描述符(0,1,2)分别与标准输入(stdin),标准输出( ...

  6. [工具] 将Sublime Text 3配置为Java代码编辑器

    新建编译器选项 选择菜单栏中的 Tools ——> Build System ——> New Build System ,输入: { "cmd": ["jav ...

  7. jenkins中Email Extersion Plugin插件使用说明点

    在jenkins中使用第3方邮件插件Email Extersion Plugin时,根据网上教程,发现每次都没有生成模板 再次查看,发现 $HOME_jenkins下没有templeate文件夹,查阅 ...

  8. 【转】javascript和html中unicode编码和字符转义的详解

    不是十分理解unicode和html转义的情况下,可能会误用,所以下面会对它们再做比较容易理解的解释: 1.html中的转义:在html中如果遇到转义字符(如“ ”),不管你的页面字符编码是utf-8 ...

  9. 初学filter

    一. Filter介绍 Filter可以认为是Servlet的一种加强版,它主要用于对用户请求进行预处理,也可以对HTTPServletResponse进行后处理,是个典型的处理链.它的完整处理流程是 ...

  10. WF的简单使用

    WWF(Windows Workflow Foundation):是微软提供的工作流技术,工作流就是对工作流程的规范和抽象.主要有三个部分Activity(活动).Runtime(工作流运行时)和To ...