AngularJS ui-router，状态更改时滚动到下一步。

Question

我在我的应用程序中使用UI-router，当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。

有人知道如何做到这一点吗？

- jonhobbs

Answer 1

首先，您需要定义状态。

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

添加 onEnter 控制器（这样你就可以注入东西了）。

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

---

滚动至指定元素或使指定元素动画滚动

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

---

这里是示例

- Umidbek

---

我可以在没有UI-view标签的页面上使用它吗？ - jonhobbs

@jonhobbs 是的。根据文档：ui-view指令告诉$state在哪里放置你的模板。，所以如果你不使用模板，你就不需要它。 - Umidbek

Answer 2

使用

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

您可以像这样做：

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

- Lajos Veres

Answer 3

你可以监听 $locationChangeSuccess，例如：

$rootScope.$on('$locationChangeSuccess', scrollBasedOnLocationChangeEvent);

基本示例：http://angular-ui.github.io/ui-router/site/#/api/ui.router.router.$urlRouter。

- Riley Lark

---

好的，那我是不是应该设置一些状态，它们都指向同一个URL，然后监听位置变化并在监听器内使用jqLite动画来使其工作？我希望UI-router有某种方法可以做到这一点，这样我就不必将滚动代码放在我的控制器中了。 - jonhobbs

我也不会把这段代码放在控制器中，但看起来 onEnter 是正确的解决方案。 - Riley Lark

Answer 4

如果div已经在当前页面上，只需将href硬编码为当前页面。

<div id="step1">
<a href="wizard.html#/wizard/start#step1">Continue to step 1</a>
</div>
<div id="step2">
<a href="wizard.html#/wizard/start#step2">Continue step 2</a>
</div>
<div id="step3">
    Step 3 content
</div>

<a name="#step2">STEP 2</a>

<a name="#step1">STEP 1</a>

- user3909593

---

我需要首先使用ng-click调用一个函数，因为它必须使用预订详细信息调用我的API。另外，绕过UI-router是个好主意吗？我宁愿调用路由器的.go()方法而不是仅使用window.location，因为我希望历史记录能够正常工作。 - jonhobbs