Реализация уведомлений в angularjs
Мне было интересно, как будет реализовано предупреждение об ошибке с использованием angularjs.
Требуемый функционал:
alertQueueсостоит из всех предупреждений, отображаемых пользователю. Эти предупреждения удаляются из очереди через 3 секунды. Сам пользователь может закрыть оповещение, нажав кнопку закрытия.- Этот
AlertServiceдолжен быть основной службой. Предупреждения отображаются в виде<alert-list></alert-list>, т.е. с использованием компонентаalertList. - Должна иметься возможность обновлять предупреждения от других контроллеров, например:
AlertService.alert("my alert").
пока что я сделал?
angular.
module('core').
factory('AlertService', [function() {
var alertQueue = [];
var addAlert = function(message, type){
message = {message: message, type: type};
alertQueue.push(message)
};
var deleteAlert = function(alert){
alertQueue.splice(alertQueue.indexOf(alert), 1);
};
return{
warning: function(msg){
addAlert(msg, "warning");
},
success: function(msg){
addAlert(msg, "success");
},
removeAlert: function(alert){
deleteAlert(alert);
},
getAlerts: function(){
return alertQueue;
}
}
}]);
angular.
module('alertApp').
component('alertList', {
templateUrl: '/static/js/app/aurora-alert/aurora-alert.template.html',
controller: ['$routeParams','$scope', 'Aurora',
function AlertController($routeParams, $scope, AlertService) {
var self = this;
self.alertQueue = AlertService.alertQueue;
self.alert = function(){
var message = arguments[0];
AlertService.warning(message);
};
self.removeAlert = function(alert) {
AlertService.removeAlert(alert);
};
}
]
});
Я знаю, что делаю что-то не так в приведенном выше коде и в его логике. Выше я сказал, что мне нужен компонент <alert-list></alert-list>. Итак, alertService вводится как зависимость в alertController. Но как мне поднять оповещение от других контроллеров? Я знаю, что мы можем использовать $scope.$broadcast, но мне кажется, что это неправильно.
Объясните, пожалуйста, как этого добиться? Использование сторонних библиотек запрещено.
Ответы 1
Я думаю, что вы делаете это лишь слегка неправильно. Ваш alert-list должен отвечать только за отображение и удаление предупреждений, а не за их создание. Оставьте создание предупреждений вашим контроллерам
Так, например, если вы столкнулись с ошибкой с ApiSerivce:
DemoCtrl(AlertService, ApiService) {
ApiService.submitForm({some:data}).then(function() {
//something successfull happened
}).catch(function(error) {
AlertService.warning("Something bad happened calling the API serivce");
});
}
Затем вы можете изменить службу AlertService для трансляции события при создании нового предупреждения, которое alert-list может прослушивать:
factory('AlertService', ["$rootScope", function($rootScope) {
var alertQueue = [];
var addAlert = function(message, type){
message = {message: message, type: type};
alertQueue.push(message)
$rootScope.$broadcast("new-alert"); //notify the list that there are new alerts
};
Вот как вы бы послушали это на своем alert-list:
$scope.$on("new-alert", function() {
self.alertQueue = AlertService.alertQueue;
});
Таким образом, как только предупреждение создается, alert-list мгновенно обновляется последней очередью предупреждений.
Вероятно, вы захотите сделать то же самое для удаления предупреждений.