关闭模态对话框不返回原始 html 页面

Question

我有一个从主标题栏中显示的非常简单的模态对话框。 当我关闭模式对话框时，它不会返回到原始页面。地址栏中显示的 url 是我关闭的 modal。 如何返回单击按钮时显示的原始页面。 这是我的代码： 这是app.js 中的模态，reportSettingModal 的显示方式。

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

这是 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>

这是控制器：

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
]);

所以，如果我在 VAnalyze 页面上并打开模式，当我关闭模式时，我想在 VAnalyze 页面上。

更新

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

  ]);

更新 我在模态关闭函数中添加了state.go 函数，但在打开模态时仍然没有返回上一个 url。这是我目前的关闭功能：

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

通过代码，url、name templateUrl 和控制器都已正确设置。

Answer 1

选项 1：

在您的关闭函数中，您应该指定要进入的状态。一旦用户关闭模式。

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

选项 2：

如果 URL 不相关，可以从 VAnalyze 状态控制器调用 Modal 服务，即 VAnalyzeCtrl：

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

通过这样做，您不必将用户重定向到以前的 URL。

Answer 2

要返回之前的状态，您需要存储它，以便在模式关闭时重新路由到它。

你需要在你的 app.js 文件中添加这个函数，就像你定义config一样，

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

在您的ReportSettingModalCtrl 中，

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

$scope.close = function() {
  $uibModalInstance.close();
  $state.go($rootScope.$previousState.name);
   };
  } //end main function
]);