javascript - Angular ui 路由器在特定状态下自动滚动

Question

我有一个 Controller ，每当状态更改开始时，它都会使窗口滚动到顶部:

$rootScope.$on('$stateChangeStart',function(){
  window.scrollTo(0, 0);
});

但是，在某些状态下，我有部分 View 触发 $stateChangeStart 并滚动到顶部。我不希望这种情况发生在这些 View /状态上。

这是路线:

'use strict'

angular.module('myApp')
.config(function($stateProvider) {
  $stateProvider
  .state('everywhere', {
    url: '/everywhere',
    templateUrl: 'client/everywhere/everywhere.view.ng.html',
    controller: 'everywhereCtrl'
  })
  .state('everywhere.instructions', {
    url: '/instructions',
    templateUrl: 'client/everywhere/instructions/instructions.view.ng.html',
    controller: 'everywhereCtrl'
  })
  .state('everywhere.instructions', {
    url: '/others',
    templateUrl: 'client/everywhere/others/others.view.ng.html',
    controller: 'everywhereCtrl'
  });
});

和 View :

<div class="container-fluid" id="view" name="view">
    <div class="col-md-12 text-center margin-bottom margin-top">
    <ul class="nav nav-pills center-pills">
      <li class="everywhere" ui-sref-active="active"><a ui-sref="everywhere.instructions">Instructions</a></li>
      <li class="everywhere" ui-sref-active="active"><a ui-sref="everywhere.others">Others</a></li>
    </ul>
  </div>
</div>

<div ui-view root-state="everywhere"></div>

如何在特定状态下禁用自动滚动到顶部？

谢谢!

Answer 1

ui-router 允许您attach custom data到每个州。因此，您可以将一些 bool 标志 noscroll 添加到您不想滚动的状态。

.state('everywhere.instructions', {
  url: '/instructions',
  templateUrl: 'client/everywhere/instructions/instructions.view.ng.html',
  controller: 'everywhereCtrl',
  // don't scroll for this state
  data: {
    noscroll: true,
  }
})

然后在您的 $stateChangeStart 事件监听器中，您可以检查 toState 是否标记为 noscroll

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
  if (toState.data && toState.data.noscroll) {
    return;
  }

  window.scrollTo(0, 0);
});

请注意我如何将回调函数参数添加到事件监听器。 See the docs .

如果您愿意，您可以翻转此逻辑，仅在定义了 scrollToTop 状态时滚动到顶部。无论对您的用例有意义什么。