Question

我正在使用此角度js服务/指令github page来显示警报。关于我提出的问题已经开启了一个问题，但开发人员尚未解决。

我希望当用户登录时显示的第一个警报会在用户点击注销时消失，但警报会相互堆叠。

这是一个小提琴，虽然我无法复制问题，但它显示了我的代码的结构。 fiddle HTML：

<body ng-app="app">
<mc-messages></mc-messages>
<button ng-click="login()">Login</button>
<button ng-click="logout()">Logout</button>
</body>

JS：

/*jshint strict:false */
'use strict';
var app = angular.module('app', ['MessageCenterModule']);
app.controller(function ($scope, messageCenterService, $location) {
$scope.login = function () {
    $location.path('/');
    messageCenterService.add('success',
        'You are now   loggedin!', {
        status: messageCenterService.status.next
    });
    };
    $scope.logout = function () {
        $location.path('login');
        messageCenterService.add('success',
            'You are now   loggedout!', {
            status: messageCenterService.status.next
        }
        };
    });
// Create a new angular module.
var MessageCenterModule = angular.module('MessageCenterModule', []);

// Define a service to inject.
MessageCenterModule.
service('messageCenterService', ['$rootScope', '$sce', '$timeout',

function ($rootScope, $sce, $timeout) {
    return {
        mcMessages: this.mcMessages || [],
        status: {
            unseen: 'unseen',
            shown: 'shown',
            /** @var Odds are that you will show a message and right after that
             * change your route/state. If that happens your message will only be
             * seen for a fraction of a second. To avoid that use the "next"
             * status, that will make the message available to the next page */
            next: 'next',
            /** @var Do not delete this message automatically. */
            permanent: 'permanent'
        },
        add: function (type, message, options) {
            var availableTypes = ['info', 'warning', 'danger', 'success'],
                service = this;
            options = options || {};
            if (availableTypes.indexOf(type) === -1) {
                throw "Invalid message type";
            }
            var messageObject = {
                type: type,
                status: options.status || this.status.unseen,
                processed: false,
                close: function () {
                    return service.remove(this);
                }
            };
            messageObject.message = options.html ? $sce.trustAsHtml(message) : message;
            messageObject.html = !! options.html;
            if (angular.isDefined(options.timeout)) {
                messageObject.timer = $timeout(function () {
                    messageObject.close();
                }, options.timeout);
            }
            this.mcMessages.push(messageObject);
            return messageObject;
        },
        remove: function (message) {
            var index = this.mcMessages.indexOf(message);
            this.mcMessages.splice(index, 1);
        },
        reset: function () {
            this.mcMessages = [];
        },
        removeShown: function () {
            for (var index = this.mcMessages.length - 1; index >= 0; index--) {
                if (this.mcMessages[index].status == this.status.shown) {
                    this.remove(this.mcMessages[index]);
                }
            }
        },
        markShown: function () {
            for (var index = this.mcMessages.length - 1; index >= 0; index--) {
                if (!this.mcMessages[index].processed) {
                    if (this.mcMessages[index].status == this.status.unseen) {
                        this.mcMessages[index].status = this.status.shown;
                    } else if (this.mcMessages[index].status == this.status.next) {
                        this.mcMessages[index].status = this.status.unseen;
                    }
                    this.mcMessages[index].processed = true;
                }
            }
        },
        flush: function () {
            $rootScope.mcMessages = this.mcMessages;
        }
    };
}]);
MessageCenterModule.
directive('mcMessages', ['$rootScope', 'messageCenterService', function ($rootScope, messageCenterService) {
    /*jshint multistr: true */
    var templateString = '\
<div id="mc-messages-wrapper">\
  <div class="alert alert-{{ message.type }} {{ animation }}" ng-repeat="message in mcMessages">\
    <a class="close" ng-click="message.close();" data-dismiss="alert" aria-hidden="true">&times;</a>\
    <span ng-switch on="message.html">\
    <span ng-switch-when="true">\
      <span ng-bind-html="message.message"></span>\
    </span>\
    <span ng-switch-default>\
      {{ message.message }}\
    </span>\
  </div>\
</div>\
';
    return {
        restrict: 'EA',
        template: templateString,
        link: function (scope, element, attrs) {
            // Bind the messages from the service to the root scope.
            messageCenterService.flush();
            var changeReaction = function (event, to, from) {
                // Update 'unseen' messages to be marked as 'shown'.
                messageCenterService.markShown();
                // Remove the messages that have been shown.
                messageCenterService.removeShown();
                $rootScope.mcMessages = messageCenterService.mcMessages;
                messageCenterService.flush();
            };
            $rootScope.$on('$locationChangeStart', changeReaction);

            scope.animation = attrs.animation || 'fade in';
        }
    };
}]);

希望这足以让有人帮助我。如果不让我知道，我可以尝试澄清。

如何在用户更改路由/状态时关闭angularjs警报

0 个答案: