JSFiddle - React, Tailwind, and code Playground

by Yuriy Stovbur

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<button type="button" class="btn btn-default" ng-click="showAlert('hello')">
    info
</button>
<button type="button" class="btn btn-default" ng-click="showAlert('hello', 'error')">
    error
</button>
<!-- directive: alerts-area -->

CSS

.alerts-area {
    position: fixed;
    right: 15px;
    top: 55px;
    width: 300px;   
}

JavaScript

angular.module('myApp', []).

run(function($rootScope, $timeout) {
    $rootScope.alerts = [];
    $rootScope.showAlert = function(msg, type) {
        var alert = { msg: msg, type: type || 'info'};
        $rootScope.alerts.push(alert);
        $timeout(function() { $rootScope.closeAlert(alert); }, 5000);
    };
    $rootScope.closeAlert = function(alert) {
        $rootScope.alerts.splice($rootScope.alerts.indexOf(alert), 1);
    };
}).

directive('alertsArea', function() {
    return {
        restrict: 'M',
        replace: true,
        template: '\
        <div class="alerts-area">\
            <div ng-repeat="alert in alerts" class="alert alert-{{alert.type}}">\
                {{alert.msg}}\
                <button type="button" class="close" ng-click="closeAlert(alert)">&times;</button>\
            </div>\
        </div>'
    };
});

angular.element(document).ready(function() {
    angular.bootstrap(document, ['myApp']);
});