Angular 1 学习笔记二

管理用户通知
我们有了消息层以后，就可以基于它来创建更多的层来处理跨切面内容。比如用户通知。

我们首先创建一个简单的waitSpinner指令并使用messaging服务来显示和隐藏一个动画提示程序繁忙中。

angular.module('brew-everywhere').directive('waitSpinner',function(messaging,events){
    return {
        restrict:'E',
        template:'<div class="row"><img src="images/ajax-loader.gif" alt="loading, please wait" /></div>',
        link: function(scope,element){
            element.hide();
            
            var startRequestHandler = function(){
                //获取请求开始通知，显示元素
                element.show();
            };
            
            var endRequestHandler = function(){
                //获取请求结束通知，隐藏元素
                element.hide();
            };
            
            scope.startHandle = messaging.subscribe(
                events.message._SERVER_RQUEST_STARTED_,
                startRequestHandler);
                
            scope.endHandle = messaging.subscribe(
                events.message._SERVER_REQUEST_ENDED_,
                endRequestHandler);
                
            scope.$on('$destroy',function(){
                messaging.unsubscribe(scope.startHandle);
                messaging.unsubscribe(scope.endHandle);
            });
        }
    };
});

下一个服务本质上跟上面的差不多，主要是显示或者隐藏一个对话框来获取用户的回复。
我们使用一个服务来截获消息然后基于消息的类型发出不同的消息。
另外一个指令等待新消息并显示一个弹出对话框或者确认信息框。

angular.module('brew-everywhere')
    .factory('dialog',function($timeout,messaging,events){
        var messageText = '';
        var displayType = 'popup';
        var displayDialogHandler = function(message,type){
            messageText = message;
            displayType = type;
            
            $timeout(function(){
                switch(displayType){
                    case 'popup':
                        messaging.publish(events.message._DISPLAY_POPUP_, [messageText]);
                        break;
                    case 'confirmation':
                        messaging.publish(events.message._DISPLAY_CONFIRMATION_, [messageText]);
                        break;
                    default:
                        messaging.publish(events.message._DISPLAY_POPUP_, [messageText]);
                        break;
                }
            },0);
        };
        
        messaging.subscribe(events.message._DISPLAY_DIALOG_, displayDialogHandler);
        
        var init = function(){
            messageText = '';
            displayType = 'popup';
        };
        
        //定义一个返回对象
        var dialog = {
            init:init
        };
        
        return dialog;
    }).run(function(dialog){
        dialog.init();//因为没有明确的地方调用该服务，所以需要在应用程序启动时启动它
    });

对应的dialog指令：
angular.module('brew-everywhere')
    .directive('dialog', function(messaging, events) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'directive/dialog/dialog.html',
            link: function(scope, element) {
                element.hide();
                scope.modalType = 'popup';
                scope.message = '';
                var showPopupHandler = function (messageText) {
                    // got the request start notification, show the element
                    scope.message = messageText;
                    scope.modalType = 'popup';
                    element.show();
                };
            
                var showConfirmationHandler = function(messageText) {
                    // got the request start notification, show the element
                    scope.message = messageText;
                    scope.modalType = 'confirmation';
                    element.show();
                };
            
                scope.showPopupHandle = messaging.subscribe(
                    events.message._DISPLAY_POPUP_,
                    showPopupHandler);
                    scope.showConfirmationHandle = messaging.subscribe(
                    events.message._DISPLAY_CONFIRMATION_,
                    showConfirmationHandler);
                    scope.$on('$destroy', function() {
                    messaging.unsubscribe(scope.showPopupHandle);
                    messaging.unsubscribe(scope.showConfirmationHandle);
                });
            
                scope.answeredOk = function(){
                    element.hide();
                    messaging.publish(events.message._USER_RESPONDED_,["OK"]);
                };
                scope.answeredYes = function(){
                    element.hide();
                    messaging.publish(events.message._USER_RESPONDED_,["YES"]);
                };
                scope.answeredNo = function(){
                    element.hide();
                    messaging.publish(events.message._USER_RESPONDED_,["NO"]);
                };
            }
        };
});

错误处理服务：

angular.module('brew-everywhere')
    .factory('errors',function($timeout, messaging, events) {
    
        var errorMessages = [];
        
        var addErrorMessageHandler = function(message, type){
            if(!errorMessages){
                errorMessages = [];
            }
            
            errorMessages.push({type: type, message: message});
            
            $timeout(function() {
                messaging.publish(events.message._ERROR_MESSAGES_UPDATED_, errorMessages);
            }, 0);
        };
        messaging.subscribe(events.message._ADD_ERROR_MESSAGE_,
            addErrorMessageHandler);
        
        var clearErrorMessagesHandler = function() {
            errorMessages = [];
        };
        
        messaging.subscribe(events.message._CLEAR_ERROR_MESSAGES_, clearErrorMessagesHandler);
        
        var init = function(){
            errorMessages = [];
        };
        
        var errors = {
            init: init
        };
        
        return errors;
})
.run(function(errors){
    errors.init();
});
该服务定义了一个内部数组对象来保存接收自服务的错误消息，使用$timeout,让addErrorMessageHandler消息处理器立刻返回，
然后消息处理器发布一个_ERROR_MESSAGES_UPDATED_消息和errorMessages数组。
该服务还有一个消息处理器用于调用者告诉服务清理其包含的错误信息，指定消费者已经处理完毕。
该服务最后提供了一个初始化方法init，这样AngularJS就可以在模块的run方法中加载启动它。

下面定义一个notificationList通知列表指令来处理_ERROR_MESSAGES_UPDATED_和_USER_MESSAGES_UPDATE_消息。
然后将接收到的消息添加到内部数组然后发布清理消息事件。
angular.module('brew-everywhere')
    .directive('notificationList', function(messaging, events) {
    return {
        restrict: 'E',
        replace: true,
        templateUrl:'directive/notificationList/notificationList.html',
        link: function(scope) {
            scope.notifications = [];
            
            scope.onErrorMessagesUpdatedHandler = function (errorMessages) {
                if(!scope.notifications){
                    scope.notifications = [];
                }
                scope.notifications.push(errorMessages);
                messaging.publish(events.message._CLEAR_ERROR_MESSAGES_);
            };
            
            messaging.subscribe(events.message._ERROR_MESSAGES_UPDATED_,
                scope.onErrorMessagesUpdatedHandler);
            
            scope.onUserMessagesUpdatedHandler = function (userMessages) {
                if(!scope.notifications){
                scope.notifications = [];
                }
                scope.notifications.push(userMessages);
                messaging.publish(events.message._CLEAR_USER_MESSAGES_);
            };
            
            messaging.subscribe(events.message._USER_MESSAGES_UPDATED_,
                scope.onUserMessagesUpdatedHandler);
        
            scope.$on('$destroy', function() {
                messaging.unsubscribe(scope.errorMessageUpdateHandle);
                messaging.unsubscribe(scope.userMessagesUpdatedHandle);
            });
            
            scope.acknowledgeAlert = function(index){
                scope.notifications.splice(index, 1);
            };
        }
    };
});

转载于:https://my.oschina.net/u/924064/blog/901373