【问题标题】:Flash Messages don't disappear (sachinchoolur flash module) AngularJsFlash 消息不会消失(sachinchoolur flash 模块)AngularJs
【发布时间】:2017-04-21 13:25:49
【问题描述】:

我正在尝试使用 sachinchoolur's angularjs-flash 模块在我的 AngularJs 应用程序中制作 Flash 消息。

闪烁有效,但在设置的 TimeOut 后它们不会消失。

我正确地遵循了文档,并在 plnkr 中编写了最少的代码来演示问题。

https://plnkr.co/edit/OaLbAjqZDmeWoPxr5uaf?p=preview

app.js

// public/js/app.js
angular.module('myApp', ['ngFlash'


])
.config(['$locationProvider', '$httpProvider', 'FlashProvider',
  function($locationProvider, $httpProvider, FlashProvider) {
    FlashProvider.setTimeout(5000);

}])


.controller('MainCtrl', function($scope, $rootScope, $http, $location, $window, Flash) {

  $scope.test = "test";
  $scope.show = function() {
      var message = 'Welcome '
      var id = Flash.create('success', message, 0, {class: 'custom-class', id: 'custom-id'}, true);
      alert("show");
  }
});

html模板:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/script.js/2.4.0/script.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>


    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="angular-flash.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    <h1>Hello Plunker!</h1>
    {{ test }}

    <flash-message duration="5000"></flash-message>
    <button ng-click="show()">Test</button>


  </body>

</html>

【问题讨论】:

    标签: angularjs flash-message


    【解决方案1】:

    根据how to use | angular-flashFlash.create(...)

    第三个参数(数字,可选)是显示闪光灯的持续时间。 0 不自动隐藏闪光灯(用户需要点击右上角的叉号)。

    因此,我将您的 Flash.create 函数更改为包含 5000 而不是 0 这是您的超时:

    Flash.create('success', message, 5000, {
      class: 'custom-class',
      id: 'custom-id'
    }, true);
    

    而且,它有效!

    这里是working example

    【讨论】:

    • 不错!谢谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-10-11
    • 2022-10-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多