Question

我已经提供了一堆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>

我留在我当前的视图中，但是应该被触发以将页面向下滚动到步骤1的javascript永远不会被调用....任何想法都可以轻松实现此目的吗？

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

Answer 1

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

根据上述链接：

一个小型服务，用于处理幕后滚动   autoscroll属性指令。如果您愿意，也可以使用它。

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

根据this link also，autoscroll也是一个选项。（例如文档）。

<!-- 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'/>

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

1 个答案: