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});
};

然后子路径填充主路径的视图（本例中只有一个）：

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

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

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

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

我发现如果我将:name param传递给子路径并在那里解析产品，那么它不会导致闪烁：

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

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

但是当手动转到URL时，选择菜单不会显示所选选项，因为param位于子路径中，而不是父路径，再加上在每个路径中解析产品似乎都是违反直觉的，我希望它来自顶级路线，因此只能解决一次。

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

Answer 1

您可以尝试在视图上使用ng-cloak，或者您可以使用angular-spinkit创建一个loader指令，该指令在$ stateChangeStart时显示模板，并在$ viewContentLoaded时删除它。

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

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

1 个答案: