Bootstrap Modal не закрывается должным образом при изменении углового маршрута

Question

Я использую Angular ($ routeProvider, а не ui-route), и у меня есть ошибка, когда у меня модальный открытый и пытаюсь изменить маршрут.

При изменении маршрута, так как модальность все еще открыта, происходят две ошибки: 1) Я не могу прокручивать. 2) Прозрачность составляет 0,5.

Что, кажется, происходит, когда маршрутизированное событие срабатывает перед моим jQuery.hide.

У меня есть обходное решение, но я чувствую себя таким образом сосет.

Модаль включает в себя две вещи.

Один из статических ссылок. Я сделал это:

// This catches the click on signup from the modal, closes the modal, then 
// continues the route change. 
$('#modal-signup-link').click(function(event) { 
    event.preventDefault(); 
    $('#login-modal').modal('hide'); 
    $location.path('/signup'); 
}); 

В принципе, я создал jQuery на обработчике кликов. Работает хорошо.

Вторая часть модальности позволяет пользователю войти в систему, и я использую службу для вызова запроса API. Это потребовало от меня использовать $ timeout для задержки изменения маршрута (и, похоже, это работает). Я чувствую, что это решение BAD.

$scope.submit=function() { 
    console.log('Submit'); 
    Login.login($scope.username, $scope.password).then(function(data) { 
    if (data.id) { 
     $('#login-modal').modal('hide'); 
     $timeout(function() { 
     $location.path('/games'); 
     }, 500) 
    } else { 
     $scope.loginData = data.errors.password; 
     $scope.loginError = true; 
     $timeout(function() { 
     $scope.loginError = false; 
     }, 6000) 
    } 
    }); 
}; 

Игнорировать нижнюю часть, это просто для обработки ошибок.

Когда я использую $ timeout, модальный закрывается перед изменением маршрута, и мы подливаем.

Есть ли лучший способ подойти к этой проблеме?

Answer 1

Вы можете использовать $routeChangeStart, который вызывается при каждой навигации или изменении маршрута, там вы можете закрыть свой модальный.

$rootScope.$on('$routeChangeStart', function() { })

Пример:

var app = angular.module('myApp', []) 

app.run(["$rootScope","$http","$location", 
    function($rootScope,$http,$location){ 

    $rootScope.$on('$routeChangeStart', function() { 
     $('.modal').modal('hide'); // hides all modals 
     $('#login-modal').modal('hide'); // hides specific modal 
     angular.element('.modal').hide(); // same as first, but a bit angular way 
    }) 

}]) 

HEre is the documentation of the same.