angularjs的事件 $broadcast and $emit and $on

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body ng-app="search">

    <div ng-controller="ParentCtrl">

        <div ng-controller="SelfCtrl">

            <a class="btn" ng-click="click()">click me</a>

            <div ng-controller="ChildCtrl"></div>

        </div>

        <div ng-controller="BroCtrl"></div>

    </div>

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

    <script>

        var search = angular.module('search', [])

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

            $scope.$on('to-child', function(e, d) {

                console.log('关我毛事')

            })

             $scope.$on('to-parent', function(e, d) {

                console.log('we are the parent, I got it', d)

             })

        })

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

            $scope.click = function () {

                $scope.$broadcast('to-child', 'haha') // 向子

                $scope.$emit('to-parent', 'hehe') // 向父

            }

        })

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

            $scope.$on('to-child', function(e, d) {

                console.log('I\' the child, I got it', d)

            })

            $scope.$on('to-parent', function(e, d) {

                console.log('关我毛事')

            })

        })

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

            $scope.$on('to-child', function(e, d) {

                console.log('关我毛事')

            })

            $scope.$on('to-parent', function(e, d) {

                console.log('关我毛事')

            })

        })

    </script>

</body>

</html>

angularjs的事件 $broadcast and $emit and $on的更多相关文章

  1. angularjs事件通信$on，$emit，$broadcast详解

    公司项目开发用的是angularjs,关于事件通讯一直用的是EventBus,直到上周写一个小组件懒得引用EventBus时,想到用angularjs自带的事件通信时,结果很尴尬的忘记原生方法单词怎么 ...

  2. angularJS控制器之间的相互通信方式、$broadcast、$emit、$on

    在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2) ...

  3. angularjs事件传递$on、$emit和$broadcast

    如何在作用域之间通信呢? 1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的作用域中.你 ...

  4. 通过$broadcast或$emit在子级和父级controller之间进行值传递

    通过$broadcast或$emit在controller之间进行值传递,不过这些controller必须是子级或者父级关系, $emit只能向父级parent controller传递事件event ...

  5. angular之$broadcast、$emit、$on传值

    文件层级 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head> <meta ...

  6. Angular中$broadcast和$emit的使用方法

    要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应. broadcast译为广播,即上级传递下级. 示例代码: < ...

  7. AngularJS的学习--$on、$emit和$broadcast的使用

    AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$ro ...

  8. AngularJS 事件广播与接收 $emit $broadcast $on

    AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构. 其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承 ...

  9. angularJS 系列（六）---$emit(), $on(), $broadcast()的使用

    下面以一个例子来讲述 angular 中的event system,有$emit(), $on(), $broadcast().效果图如下 下面的代码中,用到了 controller AS 的语法,具 ...

随机推荐

  1. what is the virtual machine, when and why we need use it ?

    虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统. 通过虚拟机软件,你可以在一台物理计算机上模拟出二台或多台虚拟的计算机,这些虚 ...

  2. 使用rar打包多个文件为exe可执行文件

    需求分析:有些机友在刷recovery的时候不知道如何刷入,于是产生写bat脚本和打包为exe可执行文件,只要机友正确安装好驱动后连接手机双击就可以刷入rec了 解决过程: 需要打包的文件 操作过程截 ...

  3. if...else..的错误用法

    1.最近在写js代码完成一个前段DOM操作的函数时,自己错误的使用了if..else..控制体.为什么是错误的呢?看看我的 代码你就明白了: document.getElementsByClassNa ...

  4. 选中excel中的对象

    2007在查找和选择中点击“选择对象”,然后再全选全个sheet(ctrl+a)就可以看到了. 2010 “选择对象”在  开始——查找和选择——选择对象

  5. .NET安装和配置Oracle数据访问组件（ODAC）

    Many ASP.NET applications access Oracle database for the data source. Oracle supports the .NET with ...

  6. 深入浅出百度地图API开发系列（2）：创建地图

    上一篇文章里,先介绍了一下百度地图API开发所涉及到的一些基础概念,包括投影,坐标系等基础概念,再有了这些基础后,我们可以开始开发自己的web地图了.先来个代码示例(建议大家都是用百度地图API大众版 ...

  7. POJ3122Pie（二分）

    http://poj.org/problem?id=3122 题意 :这个题最主要的就是审题要仔细,翻译不要漏句子.题目讲的是我要过生日,要给好友分馅饼(还有自己也想要一块),怕引起不公,所以每个人大 ...

  8. DJANGO和UIKIT结合，作一个有进度条的无刷新上传功能

    以前作的上传,在糙了,所以在用户体验上改进一下. 同时,结合DJANGO作定位上传. 这其中分两步进行,第一次上传到TMP目录下, 第二次,将TMP下的文件转移到标准目录下. form.py file ...

  9. android dialog 原来dialog对话框也有自己的按键监听事件 onKeyDown方法

    探讨在一个activity中按menu键时弹出自己定义的dialog(自定义菜单对话框)时,再按一次手机的menu键发现这个自定义的dialog菜单并没有关闭,原来是这个dialog内部也有onKey ...

  10. Maven for Myeclipse的一个常见错误 Project configuration is not up-to-date with pom.xml

    使用Myeclipse开发Maven项目时,经常会发现一个错误提示: Description Resource Path Location Type Project configuration is ...