+
+
+ Demo
+Flash message for angularjs
+ + + + + + +
+
+ + How to use angular-flash?
+Add the Following code to the
of your document. ++<link type="text/css" rel="stylesheet" href="css/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.2.26/angular.min.js"></script> +<script src="angular-flash.min.js"></script> +// Do not include both angular-flash.js and angular-flash.min.js ++
Add flash dependency to your module
+
+var myApp = angular.module("app", ["flash"]);
+ Include flash-message="5000" directive in your html template.
++<div flash-message="5000" ></div> +// 5000 milli-secs is the display duration. +// Flash alert will be automatically dismissed after 5000 milli-secs.+
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.';
+ Flash.create('success', message, 'custom-class');
+ // First argument (success) is the type of the flash alert
+ // Second argument (message) is the message displays in the flash alert
+ // You can inclide html as message (not just text)
+ // Third argument (custom-class) is the custom class for the perticular flash alert
+ }
+}]);
+
+
+
+
+ Flash alert types
+-
+
- success +
- info +
- warning +
- danger +
+
+
+ Methods
++Flash.pause() +// Pause flash auto dismiss. +Flash.dismiss() +// Dismiss the flash+
+
+
+ Bootstrap
+Angular-flash is fully compatible with twitter bootstrap. It uses standard bootstrap classes. If bootstrap css is already included in your document then no need to include angular-flash.css in your document
+
+
+ ngAnimate
+If you want animations include ngAnimate module. you can use inbuilt classes .alertIn and .alertOut for applying css
+
+var myApp = angular.module("app", ["flash", "ngAnimate"]);
+
+
+.alertIn, .alertOut {...}
+.alertIn.ng-hide-remove, .alertOut.ng-hide-add.ng-hide-add-active {...}
+.alertOut.ng-hide-add, .alertIn.ng-hide-remove.ng-hide-remove-active {...}
+
+
+
+ Edit on Codepen
+See the Pen Flash message for AngularJS by Sachin choolur (@sachinchoolur) on CodePen.
+ +
+
+
+
+
+
+
+
+ Like angular-flash? you may also like
+-
+
- LightGallery +
- lightSlider +
- Lada-angular +
+ Tweet
+
+Follow @sachinchoolur
+
+
+
+
+