Question

我已经在我的角度应用程序中添加了一个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();
          }
        }
      });
    };
  }
]);

然后我有一个州，＆＃39;参与者＆＃39;，列出了项目中的所有参与者：

.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中删除查询参数（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的一部分，因此视图/顺序/ q查询参数不会附加到模态的URL上：）

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

1 个答案: