javascript - Angular - ui-router 如何转到页面的特定部分

我知道如何将变量传递给 Ui 路由器中的链接。

<a ui-sref="Category({ SCID: sc.scid })" ui-sref-active="active" >{{ sc.scname }}</a>

然后在路由中处理。

.state('Category', {
    templateUrl: "templates/Products.html",
    url: '/Category/:SCID/',
    controller: 'ProductsController as pc'
})

现在我想转到该页面的特定部分。说部分以 id=123 开头。

<section id="123"> reach here directly on clicking link</section>

其他一些用户也在这里提出了这个问题。 AngularJS ui.router change page and go to specific section

但这没有任何答案。

有人可以帮助我需要在 URL 和 .state 中进行哪些更改。

最佳答案

您正在寻找 $anchorScroll()

基本上，你需要做的是像往常一样设置你的路线，传递滚动参数，如:

url: '/first/:scrollTo',

只需添加以下内容，注入(inject) $anchorScroll，它就会将您滚动到具有在 $location.hash() 中找到的 id 的任何元素

app.run(function($rootScope, $location, $anchorScroll, $stateParams, $timeout) {
  $rootScope.$on('$stateChangeSuccess', function(newRoute, oldRoute) {
    $timeout(function() {
      $location.hash($stateParams.scrollTo);
      $anchorScroll()
    }, 100)
  });
})

然后，在您的 html 中，链接应如下所示:

<a href ui-sref="first({scrollTo: 'foo'})">First / Foo</a>

这是一个

或者，您可以在您的州创建一个 onEnter: 函数来管理它:

.state('first', {
  url: '/first/:scrollTo',
  controller: 'FirstCtrl',
  templateUrl: 'first.html',
  onEnter: function ($location, $stateParams, $anchorScroll, $timeout) {
    $timeout(function() {
      $location.hash($stateParams.scrollTo);
      $anchorScroll()
    }, 100)
  }
})

使状态更简单:

.state('first', {
  url: '/first/:scrollTo',
  controller: 'FirstCtrl',
  templateUrl: 'first.html',
  onEnter: scrollTo
})

var scrollTo = function() {
  function ($location, $stateParams, $anchorScroll, $timeout) {
    $timeout(function() {
      $location.hash($stateParams.scrollTo);
      $anchorScroll()
    }, 100)
  }
};

关于javascript - Angular - ui-router 如何转到页面的特定部分，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31860015/