显示 ui 路由器模式而不刷新父状态

Displaying a ui-router modal without refreshing the parent state

本文关键字：刷新 状态 ui 路由器 模式 显示      更新时间：2023-09-26

我在我的角度应用程序中添加了一个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 并不重要。我提到我挑战的这一部分主要是以防它会影响您对上述主要问题的回答:)

看起来这与我使用模态无关，而与查询参数（?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

上
相关文章：