提交表单时微调器答案

【问题标题】：spinner while submiting a form angularjs提交表单时微调器
【发布时间】：2016-04-06 16:19:58
【问题描述】：

如何在我的表单提交时添加微调器（然后它会转到另一个 /route）

我已经做的如下。

Angularjs

$scope.submit = function() {
    $http.post('/option', {
        firstName: $scope.firstName,
        lastName: $scope.lastName,
    }).then(function(res) {
        sessionStorage.setItem("flight", JSON.stringify(res.data));

        $location.path("/option");
        $scope.setDelay = function(){
            $scope.delay = true;
            $timeout(function(){
                $scope.delay = false;
            }, 2000);
        };
        });

HTML

按钮提交（我想在点击 onSubmit() 时显示微调器）

<md-button name="submit" ng-click="submit(); setDelay()" class="md-raised">Find</md-button>

<div> 显示微调器

<div class="loading-div" ng-show="delay">
    <img src="spinner.gif">
</div>

【问题讨论】：

现在会发生什么？有错误还是什么都没有，还是显示晚了？
@JoeLloyd 没有错误，但它在页面更改之前显示，因此在更改页面时没有“强制睡眠时刻”。我说清楚了吗？

标签： javascript angularjs forms

【解决方案1】：

1 在你的提交函数中，设置 $scope.delay = true;

2 in post return .then(function(res){, set $scope.delay = false;

这是你想要的吗？

【讨论】：

【解决方案2】：

您可以在提交方法中处理加载标志：

$scope.submit = function() {
    $scope.delay = true; //but I would name it as loading :P
    $http.post('/option', {
        firstName: $scope.firstName,
        lastName: $scope.lastName,
    }).then(function(res) {
        $scope.delay = false;
        sessionStorage.setItem("flight", JSON.stringify(res.data));
        $location.path("/option");
    });

那么你的html只需要调用提交函数：

<md-button name="submit" ng-click="submit();" class="md-raised">Find</md-button>

不管怎样，你的 setDelay 函数是在 $http.post 的成功回调中定义的，我错了。

【讨论】：

是的，它有效，但我想故意强迫睡眠时间更长一点。使用这些解决方案，它不会睡我想要的时间。你明白我的意思吗？
然后包装 $scope.delay = false;与$timeout(function(){ $scope.delay = false; }, 2000);

【解决方案3】：

<md-button name="submit" ng-click="submit()" class="md-raised">Find</md-button>

<div class="loading-div" ng-if="delay">
   <img src="spinner.gif">
</div>



$scope.submit = function() {
  $scope.delay = true;
  $http.post('/option', {
    firstName: $scope.firstName,
    lastName: $scope.lastName,
   }).then(function(res) {
      sessionStorage.setItem("flight", JSON.stringify(res.data));
      $scope.delay = false;
      $location.path("/option");
  });
}

【讨论】：

【解决方案4】：

您希望它恰好是 2 秒，还是您认为这可能是用户从服务器收到回复所需的时间？如果是第二种选择，那么您应该在 http 请求之前切换布尔值，如下所示：

$scope.submit = () => {
    $scope.delay = true;
    $http.post('/option', {
      firstName: $scope.firstName,
      lastName: $scope.lastName,
    }).then(res => {
      sessionStorage.setItem("flight", JSON.stringify(res.data));
      $scope.delay = false;
      $location.path("/option");
   })
}

和 HTML

<md-button name="submit" ng-click="submit()" class="md-raised">Find</md-button>
<div class="loading-div" ng-if="delay">
  <img src="spinner.gif">
</div>

应该这样做

【讨论】：