实现AngularJS非中断UI弹出消息

我将要开发一个UI消息传递系统，在UI中显示信息/警告/错误消息。我在jQuery中开发了类似的东西，但现在我要为AngularJS做这件事

消息传递的工作原理非常简单，只需在某个屏幕位置显示固定位置的消息，并保持显示一段时间（取决于使用最小时间+每字时间计算的内容长度），然后自动从视图中消失

信息和警告消息会自动消失，而错误需要通过用户鼠标单击显式关闭，这样我们才能确保他们看到它们（实际上，在长时间取消阻止消息队列后，它们也会自动关闭）

此消息传递系统还负责消息排队，因为一次只显示一条消息。除非收到错误消息，否则此队列将作为FIFO工作。错误消息作为后进先出（LIFO）推送到队列中，因为它们更重要

无论如何。我想分两部分来做：

AngularJS服务，该服务将实现消息排队并为单个消息向$rootScope发送事件

AngularJS指令，用于向用户显示发出的消息

问题: 作为jQuery插件，这一切都包含在特定的插件中，但在这里我必须将这两部分分开，这样控制器/服务（即拦截器）就可以使用此消息传递。它们都将使用服务，但指令将只负责这些消息的实际显示

现在。每个部分都有什么内容？我有三种可能：

服务实现排队，指令实现计时
问题如果指令控制定时，何时应显示服务发出消息

服务实现排队和计时，指令仅显示和隐藏由服务的事件组合发出的消息
问题如果不是由另一条从指令返回到服务的消息启动，如何实现由用户启动的错误消息隐藏

服务只为调用者实现API（如

messageService.Show（type，message）

，指令实现其他一切-排队、计时、显示/隐藏
问题没有预想到

第三个似乎是最直截了当的，但在这种情况下，服务除了发出消息事件外，实际上没有任何特殊的用途。就服务和指令而言，它应该更准确，反之亦然。服务应该是智能的，指令应该是哑的

---

我应该如何实现我的服务才能真正拥有一些功能（智能消息服务）和一个愚蠢的指令，它只会使用服务告诉它做的任何事情？

我实际上实现了一些非常接近您想要做的事情。也许这些代码片段可以帮助您。 这只是一个快速的解决方案，没有经过真正的测试，但它可能会给你一个想法

指令

angular.module( 'app' )
  .directive( 'alerter', function ( $timeout, alert )
  {
    return {
      templateUrl: 'app/directives/alerter/alerter.html',
      restrict: 'E',
      scope: {},
      link: function ( $scope )
      {
        $scope.alerts = alert.alerts;

        $scope.closeAlert = function ( index, actualElement )
        {
          alert.remove( index, actualElement );
        };

        $scope.$watchCollection( 'alerts', function ( newAlerts )
        {
          $timeout( function ()
            {
              $scope.closeAlert( newAlerts.length - 1, newAlerts[newAlerts.length - 1] );
            },
            10000 );
        } );
      }
    };
  } );

angular.module( 'app' )
  .factory( 'alert', function ()
  {
    var alerts = [],
      _TYPES = {
        ERROR: 'danger',
        SUCCESS: 'success'
      };

    function add( type, message )
    {
      alerts.push( {type: type, msg: message} );
    }

    function remove( index, actualElement )
    {
      alerts.splice( index, 1 );
    }

    // Public API here
    return {
      alerts: alerts,
      TYPE: _TYPES,
      add: function ( type, message )
      {
        return add( type, message );
      },
      remove: function ( index)
      {
        return remove( index);
      }
    };
  } );

模板（使用UI引导警报）

如何在控制器中添加警报

angular.module( 'app' )
  .controller( 'SomeCtrl', function ( $scope, alert)
  {
    ...
    $scope.showError = function() {
        alert.add( alert.TYPE.ERROR, 'An error occured!' );
    };
    ...
} );

无论何时，我都希望能够显示我正在添加指令的警报：

<alterter></alerter>

很抱歉，在我读了标题的前三个字之后：“实现AngularJS不引人注目”我无法继续阅读…在我看来，AngularJS和unobtrusive是两个不能结合在一起的词。不过祝你好运！阅读AngularUI中模式服务的源代码。这里是$modal service控制显示对话框的指令。@Josep：为什么？unobtrusive与用户有关，而不是像AngularJS这样的库。：）@RobertKoritnik我的错，我应该继续阅读，在过去，低调几乎是让所有体验都可以用于禁用JS的浏览器的同义词…：$事实上，你的问题很有趣+1（我现在必须上床睡觉，但我会在接下来的12-16小时内回答）@Josep：但你说的不引人注目的意思是对的。这两种情况都可以理解。它与代码有关，但也与代码在UI方面的工作方式有关，因此。。。我用不同的术语重新表述了我的问题。哦，当删除警报时，你应该确保你真的删除了rihgt警报。由于它可能已被用户或$timeout删除，因此控制器也应参考

alert

服务。我知道。。。您刚刚错过了它…感谢您的提示，我错过了：（编辑了它！您可以始终将其设置为私有，因为您需要在指令模板中访问这些项，您可以通过函数

getAll（）公开它们）

或其他什么。这样，您可以在服务的功能范围内保护它们的私有性，而外部消费者将无法以任何方式操纵它们。但这当然只是做代码审查的人的建议。是的，这就是我在代码中实际使用的方法。+1

<alterter></alerter>