javascript - 显示 ui-router 模式而不刷新父状态

Question

我在我的 Angular 应用程序中添加了一个 modalStateProvider，这样我就可以轻松地拥有带有自己 URL 的模态。

// Add support for modalState
app.provider('modalState', [
  '$stateProvider',
  function($stateProvider) {
    var provider = this;
    this.$get = function() {
      return provider;
    };
    this.state = function(stateName, options) {
      var modalInstance;
      $stateProvider.state(stateName, {
        url: options.url,
        onEnter: [
          '$modal', '$state',
          function($modal, $state) {
            modalInstance = $modal.open(options);
            modalInstance.result['finally'](function() {
              modalInstance = null;
              if ($state.$current.name === stateName) {
                $state.go('^');
              }
            });
          }
        ],
        onExit: function() {
          if (modalInstance) {
            modalInstance.close();
          }
        }
      });
    };
  }
]);

然后我有一个状态“参与者”，其中列出了项目中的所有参与者:

.state('participants', {
  url: '/participants?view&q&order',
  parent: 'feedback',
  reloadOnSearch: false,
  views: {
    'content@feedback': {
      templateUrl: moduleDir + '/participants/participants.html',
      controller: 'feedback.ParticipantsCtrl'
    }
  }
})

并且，我希望显示用于查看或编辑参与者的模式:

modalStateProvider.state('participants.view', {
  url: '/:participantId',
  templateUrl: moduleDir + '/participant/participant.html',
  controller: 'feedback.ParticipantCtrl',
});

模式会显示并根据需要拥有自己的唯一 URL。

但是，从参与者状态打开模式时，参与者状态会在后台刷新(分散用户注意力并失去滚动位置)。

如何防止这种刷新？

作为奖励，我还想在打开模式时从 URL 中删除查询参数(view、q、order)，然后在关闭模式时重新添加它们。如果用户刷新模态页面，它们无法被读取到 URL 中，这并不重要。我提到我的挑战的这一部分主要是为了防止它会影响您对上述主要问题的回答:)

Answer 1

看起来这与我使用模式无关，而与查询参数(?view&q&order)有关。

我不清楚为什么这些会导致重新加载，但通过更改为解决了我的问题:

.state('participants', {
  url: '/participants',
  parent: 'feedback',
  reloadOnSearch: false,
  onEnter: ['$stateParams', '$location', function($stateParams, $location) {
    $stateParams.view = $location.$$search.view;
    $stateParams.q = $location.$$search.q;
    $stateParams.order = $location.$$search.order;
  }],
  views: {
    'content@feedback': {
      templateUrl: moduleDir + '/participants/participants.html',
      controller: 'feedback.ParticipantsCtrl'
    }
  }
})

这解决了我最初的问题和额外的问题 - 因为它不是状态 URL 的一部分，所以 view/order/q 查询参数不会附加到模式的 URL 上:)