在项目中，我们可能会很经常性的利用到控制器之间的相互通信，在angular中的控制器之间的相互通信有以下几种方式：

1）通过本地数据的存储localstorage,sessionstorage,

2）通过rootScope，顶级作用域

3）通过$broadcast,$on,$emit的方式进行通信

在此就讲解下如何通过第三种方式进行通信的问题：

$broadcast：顾名思义是广播的意思，一般用于父级控制器向子控制器传递信息的方法。

$emit：主要是用于子控制器向父控制器传递信息的方法。

$on：用于接收$broadcast,$emit的消息

情况一：父---->子之间的通信（$broadcast）

<script src="../angular.js"></script>

<script>

angular.module("app", [])

    .controller("child", function($scope) {

        $scope.$on("parentChange", function(e, m) {//参数一：监听的事件名，回调函数的参数一：以对象的形式返回相关数据，参数二：你传递的参数

            $scope.change = "changed";

            $scope.child = m;

        })

    })

    .controller("parent", function($scope) {

        $scope.$watch("parent", function(n, o) {

            if (n == o) {

                return;

            }

            $scope.$broadcast("parentChange", n)

        })

    })

</script>

<body>

    <div ng-controller="parent">

        Parent: {{parent}}

        <input type="text" ng-model="parent">

        <div ng-controller="child">

            {{change}} Child: {{child}}

        </div>

    </div>

</body>

情况二：子--->父的通信 ($emit)

<script src="../angular.js"></script>

<script>

angular.module("app", [])

    .controller("parent", function($scope) {

        $scope.$on("childChange", function(e, m) {

            $scope.change = "changed";

            $scope.parent = m

        })

    })

    .controller("child", function($scope) {

        $scope.$watch("child", function(n, o) {

            if (n == o) {

                return;

            }

            $scope.$emit("childChange", n)

        })

    })

</script>

<body ng-controller="parent">

    {{change}} Parent: {{parent}}

    <div ng-controller="child">

        Child: {{child}}

        <input type="text" ng-model="child">

    </div>

</body>

第三种：同级的兄弟控制器之间的相互通信（要额外定义一个服务）

<script src="../angular.js"></script>

<script>

angular.module("app", [])

    .service("myServive", function($rootScope) {

        return {

            change: function(n) {

                $rootScope.$broadcast("valueChange", n);

            }

        }

    })

    .controller("bro1", function($scope, myServive) {

        $scope.$watch("value1", function(n) {

            myServive.change(n);

        })

        $scope.$on("valueChange", function(e, m) {

            console.log("value1");

            $scope.value1 = m;

        })

    })

    .controller("bro2", function($scope, myServive) {

        $scope.$watch("value2", function(n) {

            myServive.change(n);

        })

        $scope.$on("valueChange", function(e, m) {

            console.log("value2");

            $scope.value2 = m;

        })

    })

</script>

<body>

    <div ng-controller="bro1">

        <h3> value1:</h3>

        <input type="text" ng-model="value1">

    </div>

    <div ng-controller="bro2">

        <h3>value2:</h3>

        <input type="text" ng-model="value2">

    </div>

</body>

同级控制器之间的相互通信，比起前面两种情况确实来的稍微复杂一点，但是本质上还是利用的上一级的控制器进行通信（以服务的方式）

写这篇文章的原因就是在我的项目中我遇到了一个需求：我的页面中会用到angular-bootstrap的模态弹出框，现在要求模态框是没用内容的，通过z-index设置页面的内容（而非模态框）让其浮现到模态框上面（他有两个按钮），通过点击这两个按钮让模态框消失（已经设置模态框的backdtop:'static'）,【之前都是点击模态框“确认”，“取消”按钮才消失模态框】，现在是通过点击页面的上的两个按钮（与模态框没有联系）让它消失。

这个时候就需要通过同级控制器之间的相互通信。

angularJS控制器之间的相互通信方式、$broadcast、$emit、$on的更多相关文章

  1. angularjs控制器之间的数据共享与通信

    1.可以写一个service服务,从而达到数据和代码的共享; var app=angular.module('app',[]); app.service('ObjectService', [Objec ...

  2. angularjs控制器之间通信，事件通知服务

    service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...

  3. 《AngularJS》--指令的相互调用

    转载自http://blog.csdn.net/zhoukun1008/article/details/51296692 人们喜欢AngularJS,因为他很有特色,其中他的指令和双向数据绑定很吸引着 ...

  4. AngularJS中控制器之间通信方法

    在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...

  5. angularjs 控制器、作用域、广播详解

    一.控制器 首先列出几种我们平常使用控制器时的几种误区: 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,但这种实现方式存在的问题是: 如果视图1和视图2根本没有任何逻辑关系,这样& ...

  6. AngularJS 控制器通信

    指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是通过scope的继承 ...

  7. angularJS--多个控制器之间的数据共享

    为了在控制器之间共享数据,需要在服务中添加一个用来储存用户名的方法.记住,服务在 应用的生命周期内是单例模式的,因此可以将用户名安全地储存在其中. <!DOCTYPE html> < ...

  8. AngularJS 1.x系列：AngularJS控制器（3）

    1. 控制器(Controller)定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ...

  9. angular开发控制器之间的通信

    一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...

随机推荐

  1. 解决Mac外接显示器分辨率不正确问题

    解决Mac外接显示器分辨率不正确问题 TAT: 今天被坑惨了,重新安装了Mavericks后,使用thunderbolt转VGA外接显示器时遇到了分辨率的问题:外接显示器支持1080P的分辨率,但在O ...

  2. jQuery之-拼图小游戏

    在线实例:http://lgy.1zwq.com/puzzleGame/ 源代码思路分析: [一]如何生成图片网格,我想到两种方法: (1)把这张大图切成16张小图,然后用img标签的src (2)只 ...

  3. Falsy Bouncer

    真假美猴王! 删除数组中的所有假值. 在JavaScript中,假值有false.null.0."".undefined 和 NaN. 这是一些对你有帮助的资源: Boolean ...

  4. Chunky Monkey

    猴子吃香蕉可是掰成好几段来吃哦! 把一个数组arr按照指定的数组大小size分割成若干个数组块. 例如:chunk([1,2,3,4],2)=[[1,2],[3,4]]; chunk([1,2,3,4 ...

  5. iOS自动化探索（九）使用Jenkins自动化打包并发布iOS App

    继前一篇: Mac环境下安装Jenkins Jenkins安装好后, 我们试着创建一个iOS自动打包并发布的任务 iOS App构建必须在MAC上面使用xcode进行,所以我们要安装下xcode集成插 ...

  6. sql杂记

    Create procedure 存储过程的声明 PIVOT的一般语法是:PIVOT(聚合函数(列) FOR 列 in (…) )AS P 通俗简单的说:PIVOT就是行转列,UNPIVOT就是列传行 ...

  7. 配置django上传文件目录的http访问

    1.假设你的html模版文件使用以下路径来访问上传文件内容: url="{{ MEDIA_URL }}{{ images.image }}" 2.设置settings文件: MED ...

  8. DLL声明导出函数的两种方式

    DLL中导出函数的声明有两种方式:一种为在函数声明中加上__declspec(dllexport):另外一种方式是采用模块定义(.def) 文件声明,.def文件为链接器提供了有关被链接程序的导出.属 ...

  9. 一台服务器的IIS绑定多个域名

    等待十分钟: 在IIS上配置:

  10. 编程技巧：使用异或操作符（XOR）交换两数值

    异或(exclusive OR)作为4种逻辑操作符之一,相对其他3种(OR/AND/NOT)来说,出场的次数非常少,是因为在日常开发中能用到它的场景本来就不多.对笔者来说,目前接触到场景只有交换两个数 ...