AngularJS ui-router,滚动到状态更改的下一步

Question

我在我的应用程序中使用UI路由器,当URL /状态发生变化时,我想对锚点进行简单的"scrollTo".我不想从模板加载下一步,或加载新的控制器.我只想在页面上有几个div并在它们之间上下滚动.HTML的简化视图就是这样.

    <div id="step1">
        <button ng-click="moveToStep2()">Continue</button>
    </div>
    <div id="step2">
        <button ng-click="moveToStep3()">Continue</button>
    </div>
    <div id="step3">
        Step 3 content
    </div>

因此,当您进入页面时,URL将是domain.com/booking

当您单击第一个按钮时,我希望我的控制器代码将URL更改为domain.com/#/step-2并向下滚动到"step2"div.

理想情况下,当用户点击后退按钮时,它将恢复到第一个URL并向上滚动回到第1步.

有人知道怎么做吗？

Answer 1

第一.您需要定义状态.

.state('step1', {
    url: '/step-1'
})

添加onEnter控制器(所以你可以$inject).

.state('step1', {
    url: '/step-1',
    onEnter: function () {}
})

动画(或简单地滚动)到元素

$('html, body').animate({
    scrollTop: $("#step1").offset().top
}, 2000);

这里的例子

Answer 2

运用

• $ anchorScroll
• 和ui-router的onenter回调

你可以这样做:

$stateProvider.state("step1", {
  template: 'template.html',
  controller: ...,
  onEnter: function(){
      $location.hash('step1');
      $anchorScroll();
  }
});
...