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

I am using UI Router and UI Bootstrap in my Angular app. I'd like to use a service so that I can display alert messages from various controllers. I want the alert to display at the top of the screen. Any suggestions on how to modify the code below so that the alert will display at the top of the page and display messages from different controllers?

我在Angular应用程序中使用UI路由器和UI Bootstrap。我想使用服务,以便我可以显示来自各种控制器的警报消息。我希望警报显示在屏幕顶部。有关如何修改以下代码的任何建议,以便警报将显示在页面顶部并显示来自不同控制器的消息?

I'm using this Stack Overflow post as a model.

我正在使用此Stack Overflow帖子作为模型。

HTML:

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

Service:

.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:

.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;

    }
  };
});

Routers:

.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'
      },
   }
  });
  });

1 个解决方案

#1

You really have three good options that I can think of off the top of my head.

你真的有三个很好的选择,我可以想到我的头脑。

Create a global or what i like to call a "RootController" of your application bound higher up in your DOM so that the other controllers scope naturally extends it. i.e.:

创建一个全局或我喜欢称为你的应用程序的“RootController”绑定在你的DOM中更高的位置,以便其他控制器范围自然地扩展它。即:
```
<div ng-controller="RootController">
  <div ui-view></div>
</div>
```
You can create a parent state with UI Router that both your child states inherit, giving a similar effect to the case above:

您可以使用UI路由器创建父状态,您的子状态都会继承该状态,从而产生与上述情况类似的效果:
```
$stateProvider.state('parent', {controller: 'ParentController'});
$stateProvider.state('parent.child1', {controller: 'Child1Controller'});
$stateProvider.state('parent.child2', {controller: 'Child2Controller'});
```

You can pass all shared functionality through a service, which acts as an error message to your necessary controllers.

您可以通过服务传递所有共享功能,该服务充当必要控制器的错误消息。

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!';
  };
});

#1