Angular flash 2.2.5

Example of using ngFlash module.

by Roope Hakulinen

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-animate.js"></script>
<div ng-app="demoApp" class="cont">
  <div ng-controller="FlashDemoCtrl">
    <button class="btn btn-success" ng-click="success()">Success</button>
    <button class="btn btn-info" ng-click="info()">Info</button>
    <button class="btn btn-warning" ng-click="warning()">Warning</button>
    <button class="btn btn-danger" ng-click="danger()">Danger</button>
    <flash-message duration="5000"></flash-message>
  </div>
</div>

CSS

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert h4 {
  margin-top: 0;
  color: inherit;
}

.alert .alert-link {
  font-weight: bold;
}

.alert > p,
.alert > ul {
  margin-bottom: 0;
}

.alert > p + p {
  margin-top: 5px;
}

.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}

.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-success hr {
  border-top-color: #c9e2b3;
}

.alert-success .alert-link {
  color: #2b542c;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-info hr {
  border-top-color: #a6e1ec;
}

.alert-info .alert-link {
  color: #245269;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-warning hr {
  border-top-color: #f7e1b5;
}

.alert-warning .alert-link {
  color: #66512c;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.alert-danger hr {
  border-top-color: #e4b9c0;
}

.alert-danger .alert-link {
  color: #843534;
}

.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}

button.close {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.alert.ng-leave {
    opacity: 1;
    transition: opacity 1.5s ease-out;
}

.alert.ng-leave-active {
    opacity: 0;
}

JavaScript

// Demo controller
var app = angular.module('demoApp', ['ngFlash', 'ngAnimate']);
app.controller('FlashDemoCtrl', ['$rootScope', '$scope', 'Flash', '$timeout', function($rootScope, $scope, Flash, $timeout) {
  $scope.success = function() {
    var message = '<strong>Well done!</strong> You successfully read this important alert message.';
    Flash.create('success', message);
  };
  $scope.info = function() {
    var message = '<strong>Heads up!</strong> This alert needs your attention, but it\'s not super important.';
    Flash.create('info', message);
  };
  $scope.warning = function() {
    var message = '<strong>Warning!</strong> Better check yourself, you\'re not looking too good.';
    Flash.create('warning', message);
  };
  $scope.danger = function() {
    var message = '<strong>Oh snap!</strong> Change a few things up and try submitting again.';
    Flash.create('danger', message);
  };
}]);


(function() {
  /*! angular-flash - v2.2.5 - 2016-03-17
 * https://github.com/sachinchoolur/angular-flash
 * Copyright (c) 2016 Sachin; Licensed MIT */

'use strict';

var app = angular.module('ngFlash', []);

app.run(['$rootScope', function ($rootScope) {
    return $rootScope.flashes = [];
}]);

app.directive('dynamic', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function link(scope, ele, attrs) {
            return scope.$watch(attrs.dynamic, function (html) {
                ele.html(html);
                return $compile(ele.contents())(scope);
            });
        }
    };
}]);

app.directive('closeFlash', ['$compile', '$rootScope', 'Flash', function ($compile, $rootScope, Flash) {
    return {
        link: function link(scope, ele, attrs) {
            return ele.on('click', function () {
                var id = parseInt(attrs.closeFlash, 10);
                Flash.dismiss(id);
                $rootScope.$apply();
            });
        }
    };
}]);

app.directive('flashMessage',...