Question

我试图在http响应中显示一条success消息3secs，然后我需要重定向页面。
这是我的代码

<body ng-app='myApp' ng-controller='myCtrl'>
    <div class="col-lg-12 col-sm-12 col-xs-12 alert alert-success" ng-show="successMessage">
            <strong></strong>
    </div>
</body>

<script>
    var app = angular
        .module("myApp",[])
        .controller("myCtrl", function ($scope, $http, $timeout) {

            $http.post('/user/userList').then(function (response) {
                $scope.successMessage = "Form submitted successfully";
                $scope.successMessage = true;
                $timeout(function () {
                    $scope.successMessage = false;
                }, 5000);

                //growl.success('Form submitted successfully!', { title: 'Success!' });
                window.location = '/user/userList';
            })

        })

</script>

但它没有在success box中显示该消息。它只显示空成功框仅1秒，并立即重定向页面。

Answer 1

在JS中更改var名称。您使用相同的变量来设置消息和ng-show

<强> JS ：

$http.post('/user/userList').then(function (response) {
        $scope.successMessage = "Form submitted successfully";
        $scope.successMessagebool = true;
        $timeout(function () {
            $scope.successMessagebool = false;
             window.location = '/user/userList';
        }, 5000);

<强> HTML ：

<div class="col-lg-12 col-sm-12 col-xs-12 alert alert-success" ng-show="successMessagebool ">
        <strong>{{successMessage }}</strong>
</div>

Answer 2

您可以尝试在超时内转移window.location

<div class="container">

  <header>
    <h1>City Gallery</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>

  <article>
    <h1>London</h1>
    <p>Lo.........m.</p>
  </article>

  <footer>Copyri....com</footer>

</div>

Answer 3

$ timeout是一种异步方法，它不保留进程并保持其他代码等待完成。它会立即执行代码的下一部分。

在您的情况下，它会重定向到新位置'/user/userList'

将重定向放在超时功能中。

 $timeout(function () {
                             $scope.successMessage = false;
                             window.location = '/user/userList';
                       },5000);

希望现在很清楚。

Answer 4

在Angular应用程序中，ng-show希望表达式基于它可以隐藏和显示元素。你给了'字符串'。

解决方案：请使用像'isDisplay'这样的条件变量。那将用于隐藏和显示你的元素。您还需要使用{{successMessage}}打印消息。对于您的案例<strong>{{successMessage}}</strong>这将打印消息。现在你只需要设置'isDisplay'来隐藏和显示消息。您的最终代码将是：

$http.post('/user/userList').then(function (response) {
    $scope.successMessage = "Form submitted successfully";
    $scope.isDisplay = true;
    $timeout(function () {
        $scope.isDisplay = false;
        window.location = '/user/userList';
    }, 5000);
});

你的HTML将是：

<div class="col-lg-12 col-sm-12 col-xs-12 alert alert-success ng-hide" ng-show="isDisplay"><strong>{{successMessage}}</strong></div>

在$ http响应中显示成功消息

4 个答案: