Question

我想在我的角度上添加闪光警报。我的意思是这个简单的消息，当用户执行动作通知他他的行动已经完成时淡入/淡出。

为此，我创建了一个使用模板的指令：

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从我的控制器正确传递到我的指令。这样做的最佳做法是什么？

非常感谢

Answer 1

使用服务传递这些值。

我会这样做（coffeescript）：

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

    setMessage: (message)->
      @message = message

    getMessage: ()->
      return message

  ])

然后在你的指令中，在指令的链接功能中设置一个像这样的表（记得将flashMessageService注入指令）：

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!")

您可以在任何地方注入flashMessageService。

P.S。：这有点过于简单了。如果您在初次通话后4秒钟拨打两次电话，则第二条消息将在第一条消息安排时消失。

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

创建闪光警报的指令

1 个答案: