Реализация уведомлений оповещений в angularjs

Question

Мне было интересно, как будет реализовано предупреждение об ошибке с помощью 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, но это не так.

Пожалуйста, объясните, как этого добиться?Никакие сторонние библиотеки не должны использоваться.

Answer 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 мгновенно обновляется последней очередью оповещений.

Возможно, вы захотите сделать то же самое для удаления оповещения.