A simple lightweight flash message module for AngularJS and Bootstrap.
angular-flash | jsfiddle | codepen
You can also find angular-flash on npm
$ npm install angular-flash-alertYou can Install angular-flash using the Bower package manager.
$ bower install angular-flash-alert --saveAdd the Following code to the <head> of your document.
<link type="text/css" rel="stylesheet" href="dist/angular-flash.min.css" />
// If you are using bootstrap v3 no need to include angular-flash.css
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="dist/angular-flash.min.js"></script>
// Do not include both angular-flash.js and angular-flash.min.jsAdd ngFlash dependency to your module
var myApp = angular.module("app", ["ngFlash"])Include directive below in your HTML template.
<flash-message duration="5000" show-close="true" on-dismiss="myCallback(flash);"></flash-message>
<!--
5000ms as the default duration to show flash message.
Show the close button (x on the right).
Call myCallback with flash dismissed as parameter when flash has been dismissed.
-->Inject the Flash factory in your controller
myApp.controller('demoCtrl', ['Flash', function(Flash) {
$scope.successAlert = function () {
var message = '<strong>Well done!</strong> You successfully read this important alert message.';
var id = Flash.create('success', message, 0, {class: 'custom-class', id: 'custom-id'}, true);
// First argument (string) is the type of the flash alert.
// Second argument (string) is the message displays in the flash alert (HTML is ok).
// Third argument (number, optional) is the duration of showing the flash. 0 to not automatically hide flash (user needs to click the cross on top-right corner).
// Fourth argument (object, optional) is the custom class and id to be added for the flash message created.
// Fifth argument (boolean, optional) is the visibility of close button for this flash.
// Returns the unique id of flash message that can be used to call Flash.dismiss(id); to dismiss the flash message.
}
}]);####Flash types####
- success
- info
- warning
- danger
These methods are mostly for internal usage but can be used also from outside.
Flash.dismiss(1);
// Dismiss the flash with id of 1. Id is not the index of flash but instead a value returned by Flash.create()npm install
./node_modules/karma/bin/karma start
- Sachin Choluur (Original author)
- Roope Hakulinen (Version 2)
MIT © Sachin Choluur