繁体   English   中英

在不刷新父状态的情况下显示UI路由器模式

[英]Displaying a ui-router modal without refreshing the parent state

我在我的角度应用程序中添加了一个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上:)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM