4

如何正确使用 AngularStrap 的 ScrollSpy 接口链接到当前文档中的锚点？

查看AngularStrap 文档，我看到当访问链接时，实际上会生成一个双哈希。如： http: //mgcrea.github.io/angular-strap/##scrollspy

但是，当我自己实现该功能时，我没有看到这种行为。在我的情况下，锚标签正在尝试更新位置，而不是移动到当前文档中的某个位置。

我的 AngularStrap ScrollSpy 位于一个子页面上：my-site.com/#/hig. 具有以下定义：

<div class="hig-sidebar hidden-print hidden-sm hidden-xs" role="complementary" data-offset-top="-34" bs-affix bs-scrollspy-list>
  <ul class="nav hig-sidenav">
    <li bs-scrollspy data-target="#overview">
      <a href="#overview">Overview</a>
      <ul class="nav">
        <li bs-scrollspy data-target="#suboverview"><a href="#suboverview">Subsection</a></li>
      </ul>
    </li>
    <li bs-scrollspy data-target="#accessibility"><a href="#accessibility">Accessibility</a></li>
    <li bs-scrollspy data-target="#typography"><a href="#typography">Color and Typography</a></li>
    <li bs-scrollspy data-target="#graphics"><a href="#graphics">Icons and Graphics</a></li>
    <li bs-scrollspy data-target="#navigation"><a href="#navigation">Navigation Design</a></li>
    <li bs-scrollspy data-target="#elements"><a href="#elements">UI Elements</a></li>
    <li bs-scrollspy data-target="#reference"><a href="#reference">Reference</a></li>
  </ul>
  <a href ng-click="gotoTop()">Back to top</a>
</div>

当我滚动浏览文档时，ScrollSpy 会正确突出显示当前部分。但是当我点击一个链接时，例如 Color and Typography 链接，它会将 URL 更新为：my-site.com/#typography。

我一直在查看 AngularStrap 代码，但看不到它正在做的事情。如何确保锚链接添加到#/hig而不是替换它？

4

2 回答 2

2

是的，正如我在这里解释的那样： https ://github.com/mgcrea/angular-strap/issues/573

在 Angularjs 中，<a href="#overview">Overview</a>当您使用 $routeProvider 配置路由时，锚链接不起作用。您可以通过用控制器替换锚链接来解决此问题，如下所示：

控制器：

$scope.scrolltoHref = function (id){
        // set the location.hash to the id of
        // the element you wish to scroll to.
        $location.hash(id);
        // call $anchorScroll()
        $anchorScroll();
    };

HTML：

<a href="" ng-click="scrolltoHref('overview')">Overview</a>
于 2014-06-13T11:56:46.880 回答
0

鉴于您谈论“更新位置”的方式，我认为您可能在ngView指令中使用滚动间谍。在这种情况下，请查看本期开头所述的解决方法：

https://github.com/mgcrea/angular-strap/issues/573

这帮助我找到了一种可行的解决方案，但存在轻微的偏移问题

于 2014-06-13T10:43:08.843 回答