随笔- 1793 文章- 1 评论- 61 阅读- 298万

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

(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();
    }
})();*/