Closing the Modal dialog box does not return to the original html page

advertisements

I have a very simply Modal Dialog that is displayed from the main header bar. When I close the modal dialog, it does not go back to the original page. The url displayed in the address bar is the modal that I closed. How do I go back to the original page that was displayed when I clicked the button. This is my code: This is in app.js which is how the Modal, reportSettingModal is displayed.

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('login', {
        url: '/login',
        templateUrl: 'lib/views/login.html',
        controller: 'LoginCtrl'
      })
      .state('home', {
        url: '/home',
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl'
      })
      .state('renderReport',{
        url: '/renderReport/{guid}',
        templateUrl: 'views/renderReport.html',
        controller: 'RenderReportCtrl'
      })

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

This is the HTML:

<div class="modal-header" id="reportSettingModal" style="background-color: #A33441; color: white;">
    <h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
    <button type="button" class="btn btn-danger" style="margin-right: 5px; margin-left: 5px;" ng-click="updateWarehouse()">Update Warehouse</button>
</div>
<div class="modal-footer">
    <button class="btn btn-sm btn-vow" id="closeButton" ng-click="close()">Close</button>
  </div>

This is the controller:

angular.module('vAnalyzeApp.controllers')
.controller('ReportSettingModalCtrl', [
    '$scope',
    '$uibModal',
    'Session',
     '$uibModalInstance',
    function($scope, $uibModal, session,  $uibModalInstance){
            $scope.username = session.user;
            $scope.title = 'Report Settings';

    $scope.close = function() {
      $uibModalInstance.close();
    };
  } //end main function
]);

So, if I am on the VAnalyze page and I open the modal, when I close the modal, i want to be on teh VAnalyze page.

UPDATE

.run(['AuthService', 'configSettings', '$rootScope',
    function (AuthService, configSettings, $rootScope) {

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

  ]);

UPDATE I added the state.go function to the modal close function but is still not returning the previous url when the modal was opened. This is my current close function:

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

Stepping thru the code the url, name templateUrl and controller are all properly set.


Option 1:

Inside your close function, you should specify to which state you want to go. Once the user close the modal.

$scope.close = function() {
   $uibModalInstance.close();
   $state.go('state-name');
};

Option 2:

If the URL is not relevant, you could call the Modal service from the VAnalyze state Controller, which is VAnalyzeCtrl:

$modal.open({
    templateUrl: 'views/reportSettingModal.html',
    controller: 'ReportSettingModalCtrl'
});

By doing this, you wont have to Redirect the user to the previous URL.