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

Question

我知道如何将变量传递给 Ui-router 中的链接。

<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。

Answer 1

您正在寻找$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>

这是一个plunker

---

或者，您可以在您的状态中创建一个 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)
  }
};