angular-flash

A flash service and directive for setting and displaying flash messages in Angular JS. Specifically, the flash service is a publisher of flash messages and the flash directive is a subscriber to flash messages. The flash directive leverages the Twitter Bootstrap Alert component.

Installation

Download angular-flash.min.js or install with bower.

$ bower install angular-flash --save

Load the angular-flash.service and the angular-flash.flash-alert-directive modules in your app.

angular.module('app', ['angular-flash.service', 'angular-flash.flash-alert-directive']);

Usage

Use the flash service to publish a flash messages...

var FooController = function(flash){
    // Publish a success flash
    flash.success = 'Do it live!';

    // Publish a error flash
    flash.error = 'Fail!';
};

FooController.$inject = ['flash'];

Use the flash-alert directive to subscribe to flash messages...

<!-- Subscribe to success flash messages. -->
<div flash-alert="success" active-class="in" class="alert fade">
    <strong class="alert-heading">Congrats!</strong>
    <span class="alert-message">{{flash.message}}</span>
</div>

<!-- Subscribe to error flash messages. -->
<div flash-alert="error" active-class="in" class="alert fade">
    <strong class="alert-heading">Boo!</strong>
    <span class="alert-message">{{flash.message}}</span>
</div>

<!-- Subscribe to all flash messages. -->
<div flash-alert active-class="in" class="alert fade">
    <strong class="alert-heading">Boo!</strong>
    <span class="alert-message">{{flash.message}}</span>
</div>

When a flash message is published, the flash-alert directive will add a class of the form alert-<type> and also add classes specified in active-class. Then after 5 seconds it will remove them.

The example above leverages Twitter Bootstrap CSS3 transitions: fade and in.

Flash Service API

Properties

Set and get flash messages with the following flash properties...

success
info
warn
error

Methods

subscribe: Register a subscriber callback function to be notified of flash messages. The subscriber function has two arguments: message and type.