在更改角度路线时，Bootstrap Modal无法正确关闭

Question

I am using Angular (the $routeProvider, not ui-route), and I have a bug when I have a modal open and try to change the route.

On the route change, since the modal is still open, two bugs happen: 1) I can't scroll. 2) The opacity is at 0.5.

What seems to be happening is the routed event is firing before my jQuery.hide.

I have a workaround, but I feel like this way sucks.

The modal includes two relevant things.

One is a static link. I did this:

// 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');
});

Basically, I created a jQuery on click handler. Works well.

The second portion of the modal allows a user to log in, and I use a service to call the API request. This one required me to use the $timeout to delay the route change (and it seems to work). I feel like this is a BAD solution.

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

Ignore the bottom portion, that's just for handling errors.

When I use the $timeout, the modal closes before the route change, and we're gravy.

Is there a better way to approach this problem?

Answer 1

You can use, $routeChangeStart which gets called on every navigation, or a route change, there you can close your modal.

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

Example:

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.