javascript - 创建闪光警报的指令

Question

我想在我的 Angular 上添加闪光警报。我的意思是，当用户执行操作时，这些简单的消息会淡入/淡出，以通知他操作已完成。

为此，我创建了一个带有要使用的模板的指令:

startupjobsApp.directive('flashAlert', function () {
  return {
    restrict: 'E',

    templateUrl: 'flash-tpl',

    replace: true,

    link: function (scope, element) {
            scope.text = 'action complete';
            scope.isVisible = false;
        }
  };
});

我的模板:

<div ng-show="isVisible == true" class="flash" ng-animate="{show: 'fadeIn', hide:'fadeOut'}">{{text}}</div>

使用以下 CSS:

.fadeIn-setup,.fadeOut-setup {
  -webkit-transition: 1s linear opacity;
  -moz-transition: 1s linear opacity;
  -o-transition: 1s linear opacity;
  transition: 1s linear opacity;
}
.fadeIn-setup{
  opacity:0;
}
.fadeOut-setup{
  opacity:1;
}
.fadeIn-setup.fadeIn-start {
  opacity: 1;
}
.fadeOut-setup.fadeOut-start{
    opacity:0;
}

基本上，当用户单击按钮时，我希望能够将文本传递给我的指令，以便可以对其进行自定义并以淡入/淡出效果显示我的警报几秒钟。

但是，我无法设法将数据文本和 isVisbile 从我的 Controller 正确传递到我的指令。 执行此操作的最佳实践是什么？

非常感谢

Answer 1

使用服务来传递这些值。

我会这样做(coffeescript):

  .factory('flashMessageService', [()->
    message: ''

    setMessage: (message)->
      @message = message

    getMessage: ()->
      return message

  ])

然后在您的指令中，在指令的 link 函数内设置一个监视，如下所示(请记住将 flashMessageService 注入(inject)指令中):

scope.$watch(
  ()->
    fashMessageService.getMessage()
  , 
  (newMessage)->
    if newMessage.body isnt ''

      scope.text = message
      scope.isVisible = true

      # set a timeout to remove it afterwards.
      $timeout(
        ()-> 
          scope.isVisible = false;
          scope.text = '';
        , 
        5000
      )
)

然后要显示一条消息，您只需使用:

flashMessageService.setMessage("This is a test message!")

您可以在任何您喜欢的地方注入(inject) flashMessageService。

P.S.:这有点过于简单化了。如果您要调用此两次，一次是在首次调用后 4 秒，那么您的第二条消息将会在第一条消息预定时消失。

我自己也实现了类似的功能，我发现显示消息列表很有用，列表中的每个项目在删除之前都会显示 5 秒。这样就很难意外地编码出用户很容易错过的消息。