Question

我有一个带有登录页面的角度应用程序，该应用程序在处理请求时应显示加载对话框。如果登录在后端成功，我就没有问题，我就赶紧去了内容页面。不幸的是，如果登录失败，加载对话框永远不会被隐藏。

这是我的代码结构：

app.controller('loginController', [
  '$scope',
  '$http',
  '$mdDialog',
  function($scope, $http, $mdDialog) {
    var showLoading = function(message) {
      $mdDialog.show({
        templateUrl: '../views/loading.html',
        controller: function($scope) {
          console.log('dialog created');
          $scope.message = message;
        }
      });
    };

    $scope.credentials = {
      username: '',
      password: ''
    };

    $scope.handleLogin = function() {
      showLoading('Logging in...');
      $http.post('/login', $scope.credentials).then(function success() {
        // go to content page
      }, function error(response) {
        console.log('login failed');
      }).then(function() {
        console.log('hide');
        $mdDialog.hide();
      });
    };
  }
]);

在我的输出中，我看到：

login failed
hide
dialog created

我想知道我是否可能误解了承诺是如何工作的，或者$mdDialog服务内部有什么东西可以处理某种类型的超时。

Answer 1

正如您在输出中看到的，对话框仅在登录失败后创建。在＆＃34; show＆＃34;之后尝试发出http请求。行动结束：

app.controller('loginController', [
'$scope',
'$http',
'$mdDialog',
function($scope, $http, $mdDialog) {
    var showLoading = function(message, onShown) {
        $mdDialog.show({
            templateUrl: '../views/loading.html',
            controller: function($scope) {
                console.log('dialog created');
                $scope.message = message;
            },
            onComplete:onShown
        });
    };

    $scope.credentials = {
        username: '',
        password: ''
    };

    $scope.handleLogin = function() {
        showLoading('Logging in...', function(){
            $http.post('/login', $scope.credentials).then(function success() {
                // go to content page
            }, function error(response) {
                console.log('login failed');
            }).finally(function() {
                console.log('hide');
                $mdDialog.hide();
            });
        });
    };
}
]);

Answer 2

在then方法中，你可以放三个函数。

你必须把你的＆＃34; $ mdDialog.hide（）;＆＃34;在第二个功能，而不是第三个功能。第三个功能仅在您触发长请求时使用，并且您想要指出请求的提升百分比。

这样的事情必须奏效：

$http.post('/login', $scope.credentials).then(function success() {
        // go to content page
      }, function error(response) {
        console.log('login failed');
        $mdDialog.hide();
      });

承诺，$ mdDialog和操作顺序

2 个答案: