javascript - Angular ui-router 禁用自动滚动以修复闪烁

Question

我有一个带有路由参数的顶级路由:

$stateProvider.state('dashboard', {
  abstract: true,
  url: '/:name',
  templateUrl: 'modules/dashboard/views/dashboard.html',
  controller: DashboardController,
  controllerAs: 'dashboard',
  resolve: {
    product: ['$stateParams', 'store', function($stateParams, store) {
      return store.findWhere({name: $stateParams.name});
    }]
  }
});

当选择下拉菜单项时，:name 参数会发生变化。在更改时，我会触发以下操作:

this.handleSelected = function(product) {
  $state.go($state.current.name, {name: product.name});
};

然后子路由填充主路由的 View (本例仅填充一个):

$stateProvider.state('dashboard.main', {
  url: '',
  views: {
    '': {
      templateUrl: 'modules/main/views/main.html',
      controller: MainController,
      controllerAs: 'main'
    }
  }
});

在 dashboard.html 中，选择下拉指令采用 selectedProduct 属性，我在其中传递当前的 :name，例如:

<dropdown-products selected-product="{{$stateParams.name}}"></dropdown-products>
<div ui-view></div>

发生的情况是，每当我从下拉列表中选择一个产品时，页面就会闪烁，它会快速向下滚动到加载 View 的末尾，然后再次向上滚动，从而产生可见的闪烁。我想避免这种情况。在 ui-view 中设置 autoscroll=true 时会发生这种情况。将其设置为 false 时，它只会向下滚动，但不会向上滚动。我想做的是完全禁用这种行为；我根本不希望它滚动。

我发现，如果我将 :name 参数传递给子路由并解析其中的产品，那么它不会导致闪烁:

$stateProvider.state('dashboard', {
  abstract: true,
  url: '/',
  ...
});

$stateProvider.state('dashboard.main', {
  url: ':name',
  resolve: {
    product: ...
  }
});

但是当手动转到 URL 时，选择菜单不会显示所选选项，因为参数位于子路由中，而不是父路由中，加上解析每个路由中的产品似乎违反直觉，我想它来自顶部路由，因此仅解析一次。

我还尝试使用默认的 $anchorScrollProvider 并像 this solution 中那样禁用它。 ，但到目前为止还没有运气。有什么想法吗？

Answer 1

您可以尝试在 View 上使用 ng-cloak，也可以使用 angular-spinkit 创建一个加载器指令，在 $stateChangeStart 时显示模板，并在 $viewContentLoaded 时删除它。

如果我有其他想法，我会告诉你。