如何正确使用 AngularStrap 的 ScrollSpy 接口(interface)链接到当前文档中的 anchor ?
查看 AngularStrap documentation我看到当访问一个链接时,实际上会生成一个双哈希。如:http://mgcrea.github.io/angular-strap/##scrollspy
但是,当我自己实现功能时,我没有看到这种行为。在我的例子中, anchor 标签试图更新位置,而不是移动到当前文档中的某个位置。
我的 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 会正确突出显示当前部分。但是当我点击一个链接时,例如颜色和排版链接,它会将 URL 更新为:my-site.com/#typography
。
我一直在查看 AngularStrap 代码,看不出它正在做什么我还没有做什么。如何确保 anchor 链接添加到 #/hig
而不是替换它?
最佳答案
是的,正如我在这里解释的那样: https://github.com/mgcrea/angular-strap/issues/573
在 Angularjs 中, anchor 链接像 <a href="#overview">Overview</a>
当你有 $routeProvider 来配置你的路由时不工作。
您可以通过用 Controller 替换 anchor 链接来解决此问题,如下所示:
Controller :
$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>
关于javascript - 在 Angular 带中正确悬挂 anchor ScrollSpy,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23160958/