CODEWITHSUNDEEP
angularjsangular-uiangular-ui-bootstrapangular-ui-router
alonisser
alonisser

Reputation: 12068

Closing a modal automatically on navigation (when clicking an anchor)

I'm using angular-ui modal in my webapp. one of models display many links (anchor elements) that navigate to various parts of the app. the modal can be closed as usual with modal.dismiss() or modal.close(). but I need it to close when someone navigate out of it with clicking an anchor? usually (not angular) I could just attach an event to all the anchor clicks and close the modal from there. but in angular It seems somewhat complicated and not very "angularish" - Any ideas/directions on how to implement this?

e.g: I'm using angular-ui-router so if this can be solved through the routes It would also solve my problem.

Thanks!

Upvotes: 2

Views: 4284

Answers (2)

Ravichandran
Ravichandran

Reputation: 1039

Use $modalStack.dismissAll() to close any modalbox when state changes.

angular.module('myApp').controller('AppCtrl', ['$scope', '$rootScope', '$modal', '$modalStack',
    function ($scope, $rootScope, $modal, $modalStack) {

        $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options){
            $modalStack.dismissAll();
        });

    }
]);

Upvotes: 0

publysher
publysher

Reputation: 11372

Angular-ui-router fires events when a state change has occurred, so in your controller you could do something like:

$scope.currentModal = undefined;

// whenever a modal opens, ensure it is assigned to the $scope.currentModal. Not clear how
// you are managing your modals at the moment.

// this event-listener closes the current modal (if any)
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
  if ($scope.currentModal) {
    $scope.currentModal.dismiss();
  }
})

Upvotes: 3

Related Questions