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

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