-
-
Save seyDoggy/66978b761fb8572250f7 to your computer and use it in GitHub Desktop.
| (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; | |
| } | |
| } | |
| })(); |
| (function () { | |
| 'use strict'; | |
| angular.module('myApp') | |
| .controller('BodyCtrl', BodyCtrl); | |
| BodyCtrl.$inject = ['$scope', 'alertService']; | |
| function BodyCtrl($scope, alertService) { | |
| $scope.alerts = alertService.get(); | |
| } | |
| })(); |
| <!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> |
| (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); | |
| } | |
| } | |
| })(); |
nice
Nice.
I think you need to update the clear() function. alerts=[] will not work because it creates a new empty array and original alerts array unchanged. Probably you can use alerts.splice(0,alerts.length) or alerts.length = 0; I tried alerts.splice(0,alerts.length) and working.
Nice job 😄
My only concern is that how can I get rid of old alerts whenever I reach a new controller, forexample when I navigate from menu to other pages?
for #shilan's question, call clear method when a new controller gets called.
very cool stuff thanx 😃
this is so cool
If you want the alert to disappear after 3.5 seconds here you go:
alertService.$inject = ['$timeout'];
function alertService($timeout) {
...
function add(type, msg) {
var alert = {
type: type,
msg: msg,
close: function() {
return closeAlert(this);
}
};
$timeout(closeAlert, 3500, true, alert);
return alerts.push(alert);
}
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
Very Nice Service but it seems its not up to date any longer. When i use it i get 2 warnings:
- AlertController is now deprecated. Use UibAlertController instead.
- 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?
@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.
Thank you a lot!!
You saved many hours of work!!!
Helped a lot, thanks mate!
function add(type, msg, timeout) {
return alerts.push({
type: type,
msg: msg,
timeout: timeout,
close: function () {
return closeAlert(this);
}
});
}
Great work. Thanks!
👍