Angular-CoG-Alert
A simple alerting directive/factory for AngularJS.
Demo
Getting Started
Installation
Downlaod the source as a zip file above or install via Bower.
bower install --save angular-cog-alert
Add references to angular-cog-alert.css
& angular-cog-alert.js
.
Add dependency to your angular module.
var myApp = angular;
Add the cog-alerts
directive to your page.
Inject the Alerting
factory anywhere you want to add alerts, and then add them as necessary.
myApp;
Error Handling
Use the errorHandler
function on the Alerting factory to gracefully handle exceptions from rejected promsises.
myApp;
Styling & Animations
The alerts all have the bootstrap alert-*
classes applied to them. You can use custom class names by using the addAlert()
method on the Alerting factory, which will result in alert-[type]
classes being applied.
For animations, you can use whatever method you please. The demo uses ngAnimate and animate.css to apply the flipInY/flipOutY animations when alerts are
shown/hidden. The demo applies the animation to .alert.ng-enter
and .alert.ng-leave
.
API
- Alerting Factory
-
addAlert(type, message)
Add an alert of the given type to the list with the given message. Will apply the class
.alert-[type]
to the alert. -
addInfo(message)
Add an info alert with the given message to the list. Uses the bootstrap class
.alert-info
. -
addSuccess(message)
Add an success alert with the given message to the list. Uses the bootstrap class
.alert-success
. -
addWarning(message)
Add an warning alert with the given message to the list. Uses the bootstrap class
.alert-warning
. -
addDanger(message)
Add an info alert with the given message to the list. Uses the bootstrap class
.alert-danger
. -
errorHandler(message)
Returns a function that can be consumed by the catch method of a $q promise. Will add the given message as a danger alert.
-