如何使用 UI Bootstrap Alert 显示来自多个控制器的单个警报

Question

我在我的 Angular 应用程序中使用 UI Router 和 UI Bootstrap。我想使用一项服务，以便我可以显示来自各种控制器的警报消息。我希望警报显示在屏幕顶部。关于如何修改下面的代码，让警报显示在页面顶部并显示来自不同控制器的消息，有什么建议吗？

我正在使用这个Stack Overflow post 作为模型。

HTML：

<alert ng-repeat="alert in allInfos()" type="{{alert.type}}" close="closeAlert($index)"
     ng-cloak>{{alert.msg}}</alert>

服务：

.factory('Informer', function(){

  var messages = [];
  var Informer = {};

  Informer.inform = function(msg, type) {
    messages.push({
    msg: msg,
    type: type
   });
  };

  Informer.allInfos = function() {
    return messages;
   };

  Informer.remove = function(info) {
    messages.splice(messages.indexOf(info), 1);
  };
  return Informer;
 })

控制器：

.controller('PaymentFormCtrl',
  function ($scope, $http, Informer) {

    $scope.handleStripe = function () {
     Informer.inform("There was a problem authorizing your card.", "danger");

      $scope.messages = 'problem';   
      $scope.allInfos = Informer.allInfos;
      $scope.remove = Informer.remove;

    }
  };
});

.controller('ContactFormCtrl',
  function ($scope, $http, Informer) {
 //. . . 
     Informer.inform("There is already an account with that email address", "danger");

      $scope.messages = 'problem';   
      $scope.allInfos = Informer.allInfos;
      $scope.remove = Informer.remove;

    }
  };
});

路由器：

.state('home', {
  url: '/',
   views: {
    'top': {
      templateUrl: 'views/bigHero.html'
      },
    'bottom': {
      templateUrl: 'views/home.html',
      controller: 'HomeCtrl'
    }
    }
   })

.state('payment', {
  url: '/payment',
   views: {
    'top': {
      templateUrl: 'views/customerinfo.html',
      controller: 'ContactFormCtrl'
     },
    'bottom': {
      templateUrl: 'views/creditcard.html',
      controller: 'PaymentFormCtrl'
      },
   }
  });
  });

Answer 1

你真的有三个不错的选择，我能想到的。

1. 创建一个全局的或我喜欢称之为“RootController”的应用程序，绑定在你的 DOM 中更高的位置，以便其他控制器范围自然地扩展它。即：

   <div ng-controller="RootController">
     <div ui-view></div>
   </div>
   

2. 您可以使用 UI 路由器创建父状态，您的子状态都继承该状态，效果与上述情况类似：

   $stateProvider.state('parent', {controller: 'ParentController'});
   $stateProvider.state('parent.child1', {controller: 'Child1Controller'});
   $stateProvider.state('parent.child2', {controller: 'Child2Controller'});
   

3. 您可以通过服务传递所有共享功能，该服务作为错误消息传递给您必要的控制器。

   myService.service('errorService', function() {
     this.errorMessage = 'Everything is happy!';
   });
   myService.controller('PaymentFormCtrl', function($scope, errorService) {
     $scope.errorService = errorService;
     $scope.setError = function() {
       errorService.errorMessage = 'An error happened!';
     };
   });