angular state.go function does not redirect to previous page

Question

I have to display a modal from the main menu. The modal displays correctly. But when I close the modal, i want the previous url to be displayed. This is the code for the modal:

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl'
      })
      .state('pos',{
        url: '/pos',
        templateUrl: 'views/pos.html',
        controller: 'PosCtrl'
      })
      .state('vAnalyze',{
        url: '/vAnalyze',
        templateUrl: 'views/vAnalyze.html',
        controller: 'VAnalyzeCtrl'
      })
       .state('reportSetting',{
        url: '/reportSettingModal',
        onEnter: function($modal){
          $modal.open({
              templateUrl: 'views/reportSettingModal.html',
               controller: 'ReportSettingModalCtrl'
          });
        }
      })
      .state('error', {
        url: '/error',
        templateUrl: 'lib/views/error.html',
        controller: 'ErrorCtrl'
      });

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/home');
  })

  .run(['AuthService', 'configSettings', '$rootScope', function (AuthService, configSettings, $rootScope) 
  { // Apply Product Code 
    configSettings.productCode = 'VANALYZE';
    AuthService.configProduct(configSettings.productCode); 
    $rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) {
        $rootScope.$previousState = from;
    });
   } ]);

This is the function to close the modal:

 $scope.close = function() {
      $uibModalInstance.close();
      $state.go($rootScope.$previousState.name, {
        url: $rootScope.$previousState.url,
        templateUrl: $rootScope.$previousState.templateUrl,
        controller: $rootScope.$previousState.controller
      });
    };

When I step into the code the url, templateUrl and controller all have the correct data. But the page is not displayed. The page displayed when I close the modal is reportSettingModal.

What am I doing wrong?

Does the URL change, or even that doesn't happen? BTW - why are you passing to $state.go second parameter this object. Also, I never use router for modals, but it depends on the UC (e.g. the modal should be bookmark-able) — Ben Bracha
The url does change when I initiate the modal from different pages. For the state.go function, I tried just doing this: $state.go($rootScope.$previousState.name) But the page was not changing. SO I thought if it was more explicit it would work. But it did not. I don't know what you mean by 'use a router for modals'. Typically, I have called modals from a page and when it closes the main page is visible. This modal is called from the main menu. — Gloria Santin
Just do the modal-open from the ng-click of the menu bar. You don't need the router for that — Ben Bracha

Mr_Perfect Mr_Perfect · Accepted Answer · 2016-12-22T16:56:25

You can go by using $state.go but that is not a good practise. Because, in general, there should not be any relation between displaying a modal and state change. Showing a modal should be independent of route configuration. Just use something like addClass or removeClass to show the modal when you click on link or button.

$scope.show = function (){
// open modal here by adding a class to the modal element
}

In the same way close the modal.

angular state.go function does not redirect to previous page

1 Answers