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就会立即更新为最新的警报队列。

您可能想对警报删除做同样的事情。

在angularjs中实施通知警报

1 个答案: