如何阻止 Angular-ui 路由器处理 href答案

【问题标题】：How do I stop Angular-ui router from processing href如何阻止 Angular-ui 路由器处理 href
【发布时间】：2015-11-16 14:44:34
【问题描述】：

我收到了一堆 html，我需要将它们与我的 web api 提供的数据集成。我正在使用 Angular，页面导航正在使用 Angular-ui 路由器处理。

我的问题是我必须使用的代码包含很多这样的锚

<heading class="pageheader">
    <a href="#step1" class="link-scroll">Scroll Down</a>
       ... bunch of stuff
 </heading>

 <div id="step1">
       ... more stuff
 </div>

我的问题是，不是触发将页面向下滚动到 step1 div 中的数据输入内容的 javascript，而是单击链接刷新页面，因此我最终回到主页视图。

所以我想出了如果这样做

<heading class="pageheader">
    <a ui-sref="state" href="#step1" class="link-scroll">Scroll Down</a>
       ... bunch of stuff
 </heading>

我停留在当前视图中，但是应该触发将页面向下滚动到 step1 的 javascript 永远不会被调用....有什么简单的方法可以做到这一点吗？

我可以通过将锚点更改为 div 并处理我的角度控制器中的点击来解决它，但是我必须使用的 html 中有很多这样的东西。

【问题讨论】：

你想跳到一个锚点还是你想先改变状态然后再向下滚动到一个锚点？也许你会找到答案here。

标签： angularjs angular-ui-router

【解决方案1】：

似乎有一些support for anchorScrolling in ui-router。

根据上述链接：

一个处理后台滚动的小服务自动滚动属性指令。如果您愿意，也可以使用它。

当使用 jqLite 元素调用时，它会将元素滚动到视图中（在$timeout 之后，DOM 有时间刷新）。如果你更喜欢依靠anchorScroll 将视图滚动到锚点，这可以是通过调用$uiViewScrollProvider.useAnchorScroll()启用。

根据this link also，自动滚动也是一个选项。（来自文档的示例）。

<!-- If autoscroll unspecified, then scroll ui-view into view 
    (Note: this default behavior is under review and may be reversed) -->
<ui-view/>

<!-- If autoscroll present with no expression,
     then scroll ui-view into view -->
<ui-view autoscroll/>

<!-- If autoscroll present with valid expression,
     then scroll ui-view into view if expression evaluates to true -->
<ui-view autoscroll='true'/>
<ui-view autoscroll='false'/>
<ui-view autoscroll='scopeVariable'/>

【讨论】：