angularJS 系列---$emit(), $on(), $broadcast()的使用
Posted 牛顿的小脑
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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中的$on,$broadcast,$emit
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
angularJs--$on$emit和$broadcast的使用