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. PL/SQL Developer编码格式设置及中文乱码解决方案

    1.PL/SQL Developer中文字段显示乱码 原因:因为数据库的编号格式和pl /sql developer的编码格式不统一造成的. 2.PL/SQL Developer编码格式设置详细的解决 ...

  2. Django文档——Model字段类型(Field Types)

    大部分内容参考自http://wrongwaycn.github.io/django11/topics/db/models/index.html#topics-db-models ,内容是django ...

  3. Linux 启动直接进入 console,

    我的电脑上有两块显卡,上次fedora更新后,自动安装了nvidia的驱动, 然后悲剧发生了.再也不能够正常进行图形界面了.所以需要进入CONSOLE. 1. 当系统启动时,停止grub menu自动 ...

  4. ASIHTTPRequest的使用(转)

    转载自:http://fushengfei.iteye.com/blog/1147112 博客分类: IOS   原文地址:http://wiki.magiche.net/pages/viewpage ...

  5. bnuoj 1053 EASY Problem (计算几何)

    http://www.bnuoj.com/bnuoj/problem_show.php?pid=1053 [题意]:基本上就是求直线与圆的交点坐标 [题解]:这种题我都比较喜欢用二分,三分做,果然可以 ...

  6. 利用开源项目使discus论坛与java应用同步登录和注册

    最近做了一个资源库系统的项目,老师说可以搭建开源论坛替代自己开发社交模块(评论啊,反馈啊)来减轻负担,甚至提到了要给每个资源开一帖的功能..使我十分怀疑到底是减轻负担还是增加负担...不过怀疑归怀疑, ...

  7. python字符串截取与替换的例子

    python字符串截取与替换的多种方法 时间:2016-03-12 20:08:14来源:网络 导读:python字符串截取与替换的多种方法,以冒号分隔的字符串的截取方法,python字符串替换方法, ...

  8. 团体程序设计天梯赛-练习集L1-023. 输出GPLT

    L1-023. 输出GPLT 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定一个长度不超过10000的.仅由英文字母构成的 ...

  9. ural 1123

    找大于等于原数的最小回文数字  代码比较烂........... #include <iostream> #include <cstdio> #include <cstr ...

  10. import,reload,__import__在python中的区别

    import,reload,__import__在python中的区别 http://blog.csdn.net/five3/article/details/7762870 import作用:导入/引 ...