下面以一个例子来讲述 angular 中的event system，有$emit(), $on(), $broadcast().效果图如下

下面的代码中，用到了 controller AS 的语法，具体这种语法的使用情况，好处或是与 原来 直接在 Controller中把视图对象直接绑定到 $scope 对象上面的区别，

可以查看我之前的一片博文。

直接贴代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <link  rel="stylesheet" href="css/bootstrap.min.css" />
  5.     <link  rel="stylesheet" href="css/custom.css" />
  6. </head>
  7. <body ng-app="app">
  8.  
  9.     <div class="container" ng-controller="AccountController as vm">
  10.         <div class="header clearfix">
  11.             <nav>
  12.                 <ul class="nav nav-pills pull-right">
  13.                     <li role="presentation">
  14.                         <span>Current Balance: {{ vm.accountBalance | currency }}</span>
  15.                     </li>
  16.                 </ul>
  17.             </nav>
  18.             <h3 class="text-muted">Account Controller</h3>
  19. 			<h5>dispatches event <b>WithdrawalNotAllowed</b> downwards to Child Controllers using <b>$broadcast</b></h5>
  20.  
  21.         </div>
  22.         <div class="row">
  23.             <div class="col-lg-6" ng-controller="DepositController as t">
  24.                 <h3>Deposit Controller</h3>
  25. 				<h5>dispatches event <b>AmountDeposited</b> upwards to AccountController using <b>$emit</b></h5>
  26.                 <p>
  27.                     <input type="text" class="form-control" ng-model="t.amount" />
  28.                 </p>
  29.                 <p>
  30.                     <input type="button" class="btn btn-primary btn-sm" value="Deposit" ng-click="t.deposit()" />
  31.                 </p>
  32.             </div>
  33.  
  34.             <div class="col-lg-6" ng-controller="WithdrawController as vm">
  35.                 <h3>Withdraw Controller</h3>
  36. 				<h5>dispatches event <b>AmountWithdrawn</b> upwards to AccountController using <b>$emit</b></h5>
  37.                 <p>
  38.                     <input type="text"  class="form-control" ng-model="vm.amount" />
  39.                     <span class="error" ng-if="vm.validationError">{{vm.validationError}}</span>
  40.                 </p>
  41.                 <p>
  42.                     <input type="button" class="btn btn-primary btn-sm" value="Withdraw" ng-click="vm.withdraw()" />
  43.                 </p>
  44.             </div>
  45.         </div>
  46.  
  47.     </div>
  48.  
  49.     <!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
  50.     <!--<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
  51.     <script type="text/javascript" src="js/angular.min.js"></script>
  52.     <script type="text/javascript" src="js/custom.js"></script>
  53.     <script type="text/javascript" src="app/app.js"></script>
  54. </body>
  55. </html>

　　

  1. (function(){
  2.     'use strict';
  3.     angular.module('app', [])
  4.         .controller('AccountController', function($scope){
  5.             var vm = this;
  6.             vm.accountBalance = 0;
  7.             vm.activate = _activate;
  8.  
  9.             function _activate(){
  10.                 $scope.$on("AmountDeposited", _amountDepositedHandler);
  11.                 $scope.$on('AmountWithdrawn', _amountWithdrawnHandler);
  12.             }
  13.             function _amountDepositedHandler(event, args){
  14.                 vm.accountBalance += eval(args.amount);
  15.             }
  16.             function _amountWithdrawnHandler(event, args) {
  17.                 if (vm.accountBalance - eval(args.amount) < 0) {
  18.                     $scope.$broadcast("WithdrawalNotAllowed", {balance: vm.accountBalance});
  19.                 }
  20.                 else {
  21.                     vm.accountBalance -= eval(args.amount);
  22.                 }
  23.             }
  24.             _activate();
  25.         })
  26.         .controller('DepositController', function($scope){
  27.  
  28.             var vm = this;
  29.             vm.amount = 0;
  30.             vm.deposit = _deposit;
  31.             $scope.name = 'ysr';
  32.             function _deposit() {
  33.                 alert(this.name);
  34.                 $scope.$emit("AmountDeposited", {amount: vm.amount});
  35.                 vm.amount = 0;
  36.             }
  37.             console.log(this);
  38.         })
  39.         .controller('WithdrawController', function($scope){
  40.             var vm = this;
  41.             vm.amount = 0;
  42.             vm.validationError = "";
  43.             vm.activate = _activate;
  44.             vm.withdraw = _withdraw;
  45.  
  46.             function _activate() {
  47.                 $scope.$on("WithdrawalNotAllowed", _withdrawalNotAllowedHandler);
  48.             }
  49.  
  50.             function _withdraw() {
  51.                 vm.validationError = "";
  52.                 $scope.$emit("AmountWithdrawn", {amount: vm.amount});
  53.                 vm.amount = 0;
  54.             }
  55.  
  56.             function _withdrawalNotAllowedHandler(event, args) {
  57.                 vm.validationError = "You cannot withdraw more than $" + args.balance;
  58.             }
  59.  
  60.             _activate();
  61.         });
  62.  
  63. })();
  64. /*(function () {
  65.     'use strict';
  66.  
  67.     angular
  68.         .module('app', [])
  69.         .controller('AccountController', AccountController)
  70.         .controller('DepositController', DepositController)
  71.         .controller('WithdrawController', WithdrawController);
  72.  
  73.     AccountController.$inject = ['$scope'];
  74.     function AccountController($scope) {
  75.         var vm = this;
  76.         vm.accountBalance = 0;
  77.         vm.activate = _activate;
  78.  
  79.         function _activate() {
  80.             $scope.$on("AmountDeposited", _amountDepositedHandler);
  81.             $scope.$on("AmountWithdrawn", _amountWithdrawnHandler);
  82.         }
  83.  
  84.         function _amountDepositedHandler(event, args) {
  85.             vm.accountBalance += eval(args.amount);
  86.         }
  87.  
  88.         function _amountWithdrawnHandler(event, args) {
  89.             if (vm.accountBalance - eval(args.amount) < 0) {
  90.                 $scope.$broadcast("WithdrawalNotAllowed", {balance: vm.accountBalance});
  91.             }
  92.             else {
  93.                 vm.accountBalance -= eval(args.amount);
  94.             }
  95.         }
  96.  
  97.         _activate();
  98.     }
  99.  
  100.     DepositController.$inject = ['$scope'];
  101.     function DepositController($scope) {
  102.         var vm = this;
  103.         vm.amount = 0;
  104.         vm.deposit = _deposit;
  105.  
  106.         function _deposit() {
  107.             $scope.$emit("AmountDeposited", {amount: vm.amount});
  108.             vm.amount = 0;
  109.         }
  110.     }
  111.  
  112.     WithdrawController.$inject = ['$scope'];
  113.     function WithdrawController($scope) {
  114.         var vm = this;
  115.         vm.amount = 0;
  116.         vm.validationError = "";
  117.         vm.activate = _activate;
  118.         vm.withdraw = _withdraw;
  119.  
  120.         function _activate() {
  121.             $scope.$on("WithdrawalNotAllowed", _withdrawalNotAllowedHandler);
  122.         }
  123.  
  124.         function _withdraw() {
  125.             vm.validationError = "";
  126.             $scope.$emit("AmountWithdrawn", {amount: vm.amount});
  127.             vm.amount = 0;
  128.         }
  129.  
  130.         function _withdrawalNotAllowedHandler(event, args) {
  131.             vm.validationError = "You cannot withdraw more than $" + args.balance;
  132.         }
  133.  
  134.         _activate();
  135.     }
  136. })();*/

　　参考：http://www.ezzylearning.com/tutorial/angularjs-event-notification-system-broadcast-emit-and-on-functions

angularJS 系列（六）---$emit(), $on(), $broadcast()的使用的更多相关文章

  1. AngularJS 系列 学习笔记 目录篇

    目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)

  2. AngularJS 系列 01 - HelloWorld和数据绑定

    目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. AngularJS中的数据绑定 3. ...

  3. AngularJS 系列 02 - 模块

    引导目录: AngularJS 系列 学习笔记 目录篇 前言: 其实,在上篇文章介绍数据绑定的时候,我们的HelloWorld的代码案例中就已经使用了模块(module).哈哈. 本篇就着重介绍一下a ...

  4. AngularJS系列之总结

    AngularJS深入的系列就是这九篇博客了,把我以前在项目中应用到的和自己学习的都总结在了里面.为了更方便的看,把我写的AngularJS系列的博客都列到下面.之后就开始学习ionic:html5移 ...

  5. [AngularJS] AngularJS系列(2) 中级篇之路由

    目录 原理 angular-route ui-router 事件 深度路由 原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on(' ...

  6. [Angularjs]系列——学习与实践

    写在前面 这个系列是来这家公司到现在,边用边学,以及在工作中遇到的问题进行的总结.深入的东西不多,大多是实际开发中用到的东西. 这里做一个目录,方便查看. 系列文章 [Angularjs]ng-sel ...

  7. angularJS 系列（五）--controller AS 语法

    原文: http://www.cnblogs.com/whitewolf/p/3493362.html 这篇国外的文章也非常好: http://codetunnel.io/angularjs-cont ...

  8. AngularJS系列-翻译官网

    公司之前一直用的Web前台框架是Knockout,我们通常直接叫ko,有看过汤姆大叔的KO系列,也有在用,发现有时候用得不太顺手.本人是会WPF的,所以MVVM也是比较熟悉的,学ko也是很快就把汤姆大 ...

  9. [AngularJS] AngularJS系列(3) 中级篇之表单验证

    目录 基本验证 验证插件messages 自定义验证 基本验证 <form name="form" novalidate ng-app> <span>{{f ...

随机推荐

  1. 字符串匹配算法之KMP

    字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE",我想知道,里面是否包含另一个字符串"ABCDABD" ...

  2. 编译使用luasocket

    编译lua5.1: 因为luasocket使用的是lua5.1,所以先下载lua5.1,编译,并把头文件和dll放在xxx/lua5.1/include和xxx/lua5.1/lib 编译luasoc ...

  3. VBS 自动发送邮件

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  4. JS操作select标签

    主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速 ...

  5. JavaScript高级程序设计：第十三章

    第十三章 一.理解事件流 事件流描述的是从页面中接收事件的顺序. 1.事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点.以下面的HTML页面为例: ...

  6. Python 学习笔记2

    今天继续安装配置python. Fear can hold you prisoner. Hope can set you free.

  7. As3.0 Interface 与类的使用

    来源:http://blog.sina.com.cn/s/blog_4d65c19e0100bfkb.html 抽象类:又叫抽象基类:可以包含一般类所包含的所有特性,例如,字段,属性,方法,抽象类不能 ...

  8. 关于stringWithFormat: - 两段NSString如何合成一段

    http://blog.sina.com.cn/s/blog_6b1e4a0601019pib.html str = [NSString stringWithFormat:@"%@,%@&q ...

  9. bower 教程

    1.运行 - cmd 2.npm install -g  bower 3.文件夹右击git bash here

  10. zf-删除重复数据只保留一条(转)

    http://blog.csdn.net/anya/article/details/6407280