Skip to content

Instantly share code, notes, and snippets.

@seyDoggy

seyDoggy/SomeCtrl.js

Last active March 4, 2022 16:54
Show Gist options
  • Save seyDoggy/66978b761fb8572250f7 to your computer and use it in GitHub Desktop.
Save seyDoggy/66978b761fb8572250f7 to your computer and use it in GitHub Desktop.
Download ZIP
My version of the AngularJS ui-bootstrap alert service as derived from here: https://coderwall.com/p/r_bvhg/angular-ui-bootstrap-alert-service-for-angular-js. No $rootScopes were harmed in the making of this code.
Raw
alertService.js
(function () {
'use strict';
angular.module('myApp')
.factory('alertService', alertService);
function alertService() {
var service = {
add: add,
closeAlert: closeAlert,
closeAlertIdx: closeAlertIdx,
clear: clear,
get: get
},
alerts = [];
return service;
function add(type, msg) {
return alerts.push({
type: type,
msg: msg,
close: function() {
return closeAlert(this);
}
});
}
function closeAlert(alert) {
return closeAlertIdx(alerts.indexOf(alert));
}
function closeAlertIdx(index) {
return alerts.splice(index, 1);
}
function clear(){
alerts = [];
}
function get() {
return alerts;
}
}
})();
Raw
bodyctrl.js
(function () {
'use strict';
angular.module('myApp')
.controller('BodyCtrl', BodyCtrl);
BodyCtrl.$inject = ['$scope', 'alertService'];
function BodyCtrl($scope, alertService) {
$scope.alerts = alertService.get();
}
})();
Raw
index.html
<!doctype html>
<html ng-app="myApp" class="no-js">
<head>
<title></title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-controller="BodyCtrl">
<navigation></navigation>
<div class="main container">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="alert.close()">{{ alert.msg }}</alert>
<div ng-view=""></div>
</div>
<site-footer></site-footer>
<script src="angular.js"></script>
<script src="ui-bootstrap.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services/alertservice.js"></script>
</body>
</html>
Raw
SomeCtrl.js
(function () {
'use strict';
angular.module('myApp')
.controller('SomeCtrl', SomeCtrl);
SomeCtrl.$inject = ['$scope', '$http', ' alertService'];
function SomeCtrl($scope, $http, alertService) {
$http.put('http://some.url/user/44', {
firstName: 'John',
lastName: 'Doe'
})
.then(updateUserSuccess)
.catch(updateUserFail);
function updateUserSuccess(response) {
console.log(response);
alertService.add('success', 'User was updated.');
}
function updateUserFail(reason) {
alertService.add('warning', 'User could not be updated. ' + reason);
}
}
})();
@honkskillet
Copy link

Nice, I did something similar but I used added a directive to make it dead simple to drop an Alert element into my HTML.
https://gist.github.com/honkskillet/74338981b36931647650

@davbig
Copy link

davbig commented Oct 22, 2015

Very Nice Service but it seems its not up to date any longer. When i use it i get 2 warnings:

  1. AlertController is now deprecated. Use UibAlertController instead.
  2. alert is now deprecated. Use uib-alert instead.

I dont know how to adjust the code to avoid this error. Can someone help me please?

@fernandolopes
Copy link

@yuckrocks you just replace this:
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="alert.close()">{{ alert.msg }}</alert>

that is why:
<uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="alert.close()">{{ alert.msg }}</uib-alert>

I hope this helps.

@UrbanMaster
Copy link

Thank you a lot!!
You saved many hours of work!!!

@acastro2
Copy link

Helped a lot, thanks mate!

function add(type, msg, timeout) {
return alerts.push({
type: type,
msg: msg,
timeout: timeout,
close: function () {
return closeAlert(this);
}
});
}

@Shane325
Copy link

Great work. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment