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.

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']);

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>

<!-- Set the display duration in milli-secs.  Default is 5000, 0 disables the fade-away. -->
<div flash-alert active-class="in" class="alert fade" duration="0">
    <!-- Manually hide the alert with `hide()` -->
    <button type="button" class="close" ng-click="hide()">&times;</button>
    <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.

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

• success
• info
• warn
• error

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

Clear all subscribers and flash messages.

The project requires Bower, Grunt, and PhantomJS. Once you have installed them, you can build, test, and run the project.

To build and run tests, run either...

$ make install

or

$ npm install
$ bower install
$ grunt install

To run a live demo or do some hackery, run...

$ grunt server