Javascript 提交表单angularjs时的微调器

如何在提交表单时添加微调器（然后转到另一个/路线）

我已经做的是吼叫

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

按钮提交（我想在单击submit（）时显示微调器）

查找

其中显示微调器

---

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

2在返回后返回。然后（函数（res）{，设置$scope.delay=false

---

这就是您想要的吗？

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

2在返回后返回。然后（函数（res）{，设置$scope.delay=false

---

这就是您想要的吗？

您可以在提交方法中使用加载标志：

$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只需调用submit函数：

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

查找

---

无论如何，您的setDelay函数是在$http.post的成功回调中定义的，我错了。

您可以在提交方法中使用加载标志：

$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只需调用submit函数：

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

查找

---

无论如何，您的setDelay函数是在$http.post的成功回调中定义的，我错了。

您希望它正好是2秒，还是您认为用户可能需要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>

查找

---

这应该可以做到

您希望它正好是2秒，还是您认为用户可能需要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");
   })
}

<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");
  });
}

和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>

查找

这样就可以了

Find
<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");
  });
}

$scope.submit=函数（）{
$scope.delay=true；
$http.post（“/option”{
firstName:$scope.firstName，
lastName:$scope.lastName，
}).然后（功能（res）{
setItem（“flight”，JSON.stringify（res.data））；
$scope.delay=false；
$location.path（“/option”）；
});
}

查找
$scope.submit=函数（）{
$scope.delay=true；
$http.post（“/option”{
firstName:$scope.firstName，
lastName:$scope.lastName，
}).然后（功能（res）{
setItem（“flight”，JSON.stringify（res.data））；
$scope.delay=false；
$location.path（“/option”）；
});
}

现在发生了什么？错误还是什么都没有，或者它显示得很晚？@JoeLloyd没有错误它可以工作，但它在页面更改之前显示，因此没有“强制睡眠时刻”当它改变页面时。我清楚了吗？现在发生了什么？错误还是什么都没有，或者它显示得很晚？@JoeLloyd没有错误它可以工作，但是它在页面改变之前显示，所以没有“强制睡眠时刻”当它改变页面时。我明白了吗？是的，它可以工作，但我想故意把睡眠时间延长一点。有了这些解决方案，它就不会睡我想要的时间。你明白我的意思吗？然后用

$timeout（function（）{$scope.delay=false；}，2000）包装$scope.delay=false；和
$timeout（function（）{$scope.delay=false；}，2000）是的，它可以工作，但我想故意把睡眠时间延长一点。有了这些解决方案，它不会睡我想要的时间。你明白我的意思吗？然后用
$timeout（function（）{$scope.delay=false；}，2000）包装$scope.delay=false；