彈出是訊息 Service

1 篇文章 / 0 new

發表回應前，請先登入

週三, 2014-09-17 16:30

author

彈出是訊息 Service

使用

$scope.notice = noticeService;
$scope.notice.add({type: 'danger', title: 'Hey!', body: '閉合事件.'});//套用 bootstrap 樣式

►page 則需放入下 code, 訊息呈現格式

.alerts {
    position:fixed;
    width:300px;
    right:30px;
    top:30px;
    z-index:10;
}
.alerts>.alert-dismissable {
    position:relative;
    z-index:11;
    min-width:250px;
}

<div class="alerts" ng-show="notice.queue.length>0">
    <div class="alert alert-{{(m.type)||'info'}} alert-dismissable pull-right" ng-repeat="m in notice.queue">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <label>{{m.title}}</label>
        <div>{{m.body}}</div>
    </div>
</div>

►Service

app.service('noticeService', function($rootScope) {
    var queue = [];
    this.queue = queue;
    this.add = function(item) {
        queue.push(item);
        setTimeout(function() { // 2000ms 後自動移除
            $('.alerts .alert').eq(0).remove();
            queue.shift();
        }, 2000);
    };
    this.pop = function() {
        return this.queue.pop();
    };
});

個人較不習慣的寫法

app.service('noticeService', function($rootScope) {
    var queue = [];
    return {
        queue: queue,
        add: function(item) {
            queue.push(item);
            setTimeout(function() { // 2000ms 後自動移除
                $('.alerts .alert').eq(0).remove();
                queue.shift();
            }, 2000);
        },
        pop: function() {
            return this.queue.pop();
        }
    };
});