Обещания, $ mdDialog и порядок операций

0

У меня есть угловое приложение со страницей входа, которая должна показывать диалог загрузки во время обработки запроса. Если логин завершается на бэкэнд, у меня нет проблем, и я убираюсь на страницу контента. К сожалению, при неудачном входе в систему диалог загрузки никогда не скрывается.

Вот структура моего кода:

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 как работают обещания или может быть что-то внутренне в службе $mdDialog которая работает с тайм-аутом.

  • 1
    Вы должны использовать Angie -loading-bar chieffancypants.github.io/angular-loading-bar для всех запросов $http к бэкэнду.
  • 0
    Вы ожидаете, что секунда then () будет функционировать как finally? Если так ... измените его на finally (function () {}); См. Здесь docs.angularjs.org/api/ng/service/$q для раздела Обещание API, объясняя это.
Показать ещё 2 комментария
Теги:
angular-material

2 ответа

4
Лучший ответ

Как вы видите на выходе, диалог создается только после сбоя входа в систему. Попробуйте сделать http-запрос после завершения действия "show":

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();
            });
        });
    };
}
]);
Поделиться
  • 0
    Спасибо, это отлично работает
0

В методе then вы можете поместить три функции.

Вы должны поместить свой "$ mdDialog.hide()"; во второй функции, а не в третьей. Третья функция используется только тогда, когда вы запускаете длинный запрос, и хотите указать процент продвижения вашего запроса.

Что-то вроде этого должно работать:

$http.post('/login', $scope.credentials).then(function success() {
        // go to content page
      }, function error(response) {
        console.log('login failed');
        $mdDialog.hide();
      });
Поделиться
  • 0
    Проблема в том, что я не использую функцию прогресса, я использую другой .then() который вызывается после разрешения обещаний поста. Если вы внимательно посмотрите на мой код, я не передам ничего для параметра прогресса
  • 0
    На самом деле, это не третья функция, которую он там подключает ... затем он связывает секунду с () и устанавливает ее в функцию успеха второй функции затем () ;. Тогда я удалил бы второе и поместил его в ответ об ошибке, как указал Орест Вирон.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню