Default styling shows messages fixed at the bottom left corner of the window.
Download the files from above or install via Bower
bower install --save angular-cog-alert
Add references to angular-cog-alert.css
& angular-cod-alert.js
.
<link rel="stylesheet" href="css/angular-cog-alert.css"> <script src="js/angular-cog-alert.js"></script>
Add dependency to your angular module
var myApp = angular.module('app', ['cogAlert']);
Add the cog-alerts
directive to your page.
<cog-alerts></cog-alerts>
Inject the Alerting
factory anywhere you want to add alerts, and then add them as necessary.
myApp.controller('myController', function ($scope, Alerting) { $scope.doSomething = function () { //do something Alerting.addDanger('Danger Will Robinson!'); }; });
Use the errorHandler
function on the Alerting factory to gracefully handle exceptions from rejected promises.
myApp.controller('serviceController', function ($scope, someService, Alerting) { $scope.callService = function () { someService.getSomePromise().then(function () { //it worked!! Alerting.addSuccess('Hooray for not sucking!'); }) .catch(Alerting.errorHandler('A promise has been broken, and I have died a little inside.')); }; });
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 a success alert with the given message to the list. Uses the bootstrap class .alert-success
.
addWarning(message)
Add a warning alert with the given message to the list. Uses the bootstrap class .alert-warning
.
addDanger(message)
Add a danger 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.