angularJS 系列（六）---$emit(), $on(), $broadcast()的使用
下面以一个例子来讲述 angular 中的event system，有$emit(), $on(), $broadcast().效果图如下
下面的代码中，用到了 controller AS 的语法，具体这种语法的使用情况，好处或是与 原来 直接在 Controller中把视图对象直接绑定到 $scope 对象上面的区别，
可以查看我之前的一片博文。
直接贴代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/custom.css" />
</head>
<body ng-app="app"> <div class="container" ng-controller="AccountController as vm">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation">
<span>Current Balance: {{ vm.accountBalance | currency }}</span>
</li>
</ul>
</nav>
<h3 class="text-muted">Account Controller</h3>
<h5>dispatches event <b>WithdrawalNotAllowed</b> downwards to Child Controllers using <b>$broadcast</b></h5> </div>
<div class="row">
<div class="col-lg-6" ng-controller="DepositController as t">
<h3>Deposit Controller</h3>
<h5>dispatches event <b>AmountDeposited</b> upwards to AccountController using <b>$emit</b></h5>
<p>
<input type="text" class="form-control" ng-model="t.amount" />
</p>
<p>
<input type="button" class="btn btn-primary btn-sm" value="Deposit" ng-click="t.deposit()" />
</p>
</div> <div class="col-lg-6" ng-controller="WithdrawController as vm">
<h3>Withdraw Controller</h3>
<h5>dispatches event <b>AmountWithdrawn</b> upwards to AccountController using <b>$emit</b></h5>
<p>
<input type="text" class="form-control" ng-model="vm.amount" />
<span class="error" ng-if="vm.validationError">{{vm.validationError}}</span>
</p>
<p>
<input type="button" class="btn btn-primary btn-sm" value="Withdraw" ng-click="vm.withdraw()" />
</p>
</div>
</div> </div> <!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</body>
</html>
(function(){
'use strict';
angular.module('app', [])
.controller('AccountController', function($scope){
var vm = this;
vm.accountBalance = 0;
vm.activate = _activate;
function _activate(){
$scope.$on("AmountDeposited", _amountDepositedHandler);
$scope.$on('AmountWithdrawn', _amountWithdrawnHandler);
}
function _amountDepositedHandler(event, args){
vm.accountBalance += eval(args.amount);
}
function _amountWithdrawnHandler(event, args) {
if (vm.accountBalance - eval(args.amount) < 0) {
$scope.$broadcast("WithdrawalNotAllowed", {balance: vm.accountBalance});
}
else {
vm.accountBalance -= eval(args.amount);
}
}
_activate();
})
.controller('DepositController', function($scope){
var vm = this;
vm.amount = 0;
vm.deposit = _deposit;
$scope.name = 'ysr';
function _deposit() {
alert(this.name);
$scope.$emit("AmountDeposited", {amount: vm.amount});
vm.amount = 0;
}
console.log(this);
})
.controller('WithdrawController', function($scope){
var vm = this;
vm.amount = 0;
vm.validationError = "";
vm.activate = _activate;
vm.withdraw = _withdraw;
function _activate() {
$scope.$on("WithdrawalNotAllowed", _withdrawalNotAllowedHandler);
}
function _withdraw() {
vm.validationError = "";
$scope.$emit("AmountWithdrawn", {amount: vm.amount});
vm.amount = 0;
}
function _withdrawalNotAllowedHandler(event, args) {
vm.validationError = "You cannot withdraw more than $" + args.balance;
}
_activate();
});
})();
/*(function () {
'use strict';
angular
.module('app', [])
.controller('AccountController', AccountController)
.controller('DepositController', DepositController)
.controller('WithdrawController', WithdrawController);
AccountController.$inject = ['$scope'];
function AccountController($scope) {
var vm = this;
vm.accountBalance = 0;
vm.activate = _activate;
function _activate() {
$scope.$on("AmountDeposited", _amountDepositedHandler);
$scope.$on("AmountWithdrawn", _amountWithdrawnHandler);
}
function _amountDepositedHandler(event, args) {
vm.accountBalance += eval(args.amount);
}
function _amountWithdrawnHandler(event, args) {
if (vm.accountBalance - eval(args.amount) < 0) {
$scope.$broadcast("WithdrawalNotAllowed", {balance: vm.accountBalance});
}
else {
vm.accountBalance -= eval(args.amount);
}
}
_activate();
}
DepositController.$inject = ['$scope'];
function DepositController($scope) {
var vm = this;
vm.amount = 0;
vm.deposit = _deposit;
function _deposit() {
$scope.$emit("AmountDeposited", {amount: vm.amount});
vm.amount = 0;
}
}
WithdrawController.$inject = ['$scope'];
function WithdrawController($scope) {
var vm = this;
vm.amount = 0;
vm.validationError = "";
vm.activate = _activate;
vm.withdraw = _withdraw;
function _activate() {
$scope.$on("WithdrawalNotAllowed", _withdrawalNotAllowedHandler);
}
function _withdraw() {
vm.validationError = "";
$scope.$emit("AmountWithdrawn", {amount: vm.amount});
vm.amount = 0;
}
function _withdrawalNotAllowedHandler(event, args) {
vm.validationError = "You cannot withdraw more than $" + args.balance;
}
_activate();
}
})();*/
angularJS 系列（六）---$emit(), $on(), $broadcast()的使用的更多相关文章
- AngularJS 系列 学习笔记 目录篇
目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)
- AngularJS 系列 01 - HelloWorld和数据绑定
目录导读: AngularJS 系列 学习笔记 目录篇 前言: 好记性不如烂键盘,随笔就是随手笔记,希望以后有用. 本篇目录: 1. Hello World 2. AngularJS中的数据绑定 3. ...
- AngularJS 系列 02 - 模块
引导目录: AngularJS 系列 学习笔记 目录篇 前言: 其实,在上篇文章介绍数据绑定的时候,我们的HelloWorld的代码案例中就已经使用了模块(module).哈哈. 本篇就着重介绍一下a ...
- AngularJS系列之总结
AngularJS深入的系列就是这九篇博客了,把我以前在项目中应用到的和自己学习的都总结在了里面.为了更方便的看,把我写的AngularJS系列的博客都列到下面.之后就开始学习ionic:html5移 ...
- [AngularJS] AngularJS系列(2) 中级篇之路由
目录 原理 angular-route ui-router 事件 深度路由 原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on(' ...
- [Angularjs]系列——学习与实践
写在前面 这个系列是来这家公司到现在,边用边学,以及在工作中遇到的问题进行的总结.深入的东西不多,大多是实际开发中用到的东西. 这里做一个目录,方便查看. 系列文章 [Angularjs]ng-sel ...
- angularJS 系列（五）--controller AS 语法
原文: http://www.cnblogs.com/whitewolf/p/3493362.html 这篇国外的文章也非常好: http://codetunnel.io/angularjs-cont ...
- AngularJS系列-翻译官网
公司之前一直用的Web前台框架是Knockout,我们通常直接叫ko,有看过汤姆大叔的KO系列,也有在用,发现有时候用得不太顺手.本人是会WPF的,所以MVVM也是比较熟悉的,学ko也是很快就把汤姆大 ...
- [AngularJS] AngularJS系列(3) 中级篇之表单验证
目录 基本验证 验证插件messages 自定义验证 基本验证 <form name="form" novalidate ng-app> <span>{{f ...
随机推荐
- hadoop pig入门总结
在这里贴一个pig源码的分析,做pig很长时间没做笔记,不包含任何细节,以后有机会再说吧 http://blackproof.iteye.com/blog/1769219 hadoop pig入门总结 ...
- NOIP2015普及组第四题推销员
好久没有写博客了,今天再写一篇.还是先看题: 试题描述 阿明是一名推销员,他奉命到螺丝街推销他们公司的产品.螺丝街是一条死胡同,出口与入口是同一个,街道的一侧是围墙,另一侧是住户.螺丝街一共有 N 家 ...
- iosiOSlabel基本使用以及文字自适应
(如果需要的不是使用的属性值如换行形式,可以把对应的属性在程序中书写然后按"command"+鼠标左键点击就可以查看所有属性值) 一label基本设置 self.view.back ...
- hdu_2608_0 or 1_数论
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2608 反正我是没找出这个规律的,规律参考的别人的! /* 分析:假设数n=2^k*p1^s1*p2^s ...
- Broken Keyboard（悲剧文本）
你有一个键盘,键盘上所有的键都能正常使用,只是Home键和End键有时会自动按下.你并不知道这一情况,而是专心地打稿子,甚至连显示器都没开电源.当你打开显示器之后,展现在你面前的是一段悲剧文本.你的任 ...
- Qt中利用QTime类来控制时间,这里简单介绍一下QTime的成员函数的用法:
Qt中利用QTime类来控制时间,这里简单介绍一下QTime的成员函数的用法: ------------------------------------------------------------ ...
- think in uml-关系
1.关联关系association 在一段时间内将多个类的实例连接在一起 某个对象在一段时间内一直"知道"另一个对象的存在 2.依赖关系dependency 一个对象的修改会导致另 ...
- PHP的curl实现get，post 和 cookie
类似于dreamhost这类主机服务商,是显示fopen的使用 的.使用php的curl可以实现支持FTP.FTPS.HTTP HTPPS SCP SFTP TFTP TELNET DICT FILE ...
- asp.net导出excel科学计数问题
方法一: 在asp.net 中 我一般都是将要导出的数据放到gridview网格里,首先对网格邦定数据时 字符串形式处理,然后再用普通的形式导出excel就把问题解决了. 我的代码非常简单:在邦定gr ...
- 获取sql执行时间
sql server中获取要执行的sql或sql块的执行时间,方法之一如下: declare @begin datetime,@end datetime set @begin =getdate() - ...