我已经提供了一堆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中有很多这些。
答案 0 :(得分:0)
似乎有一些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'/>