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
.