gpt4 book ai didi

javascript - Angularjs $anchorScroll 在 ng-view 中不工作

转载 作者:行者123 更新时间:2023-11-30 13:03:57 24 4
gpt4 key购买 nike

我的脚本基于http://plnkr.co/edit/De6bBrkHpojgAbEvHszu但是我与 ID anchor 的所有链接都在 View 中,每次单击它们都不会将我带到元素,它只是重新加载 View 。有什么想法吗?

我正在使用的脚本

/*Intercept onpage anchor hash usage: <a href="#/test?scrollTo=foo">Test/Foo</a> */
Site.run(function($rootScope, $location, $anchorScroll, $routeParams) {
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
$location.hash($routeParams.scrollTo);
$anchorScroll();
});
})

我的一个链接

<a href="#/article/10?scrollTo=test" target="">Test</a>

我要导航到的元素

<h3 id="test">Test</h3>

最佳答案

希望我正确理解了您的问题。

看来您想链接到文章的特定部分,使用 AngularJS $anchorScroll 来完成。

我在编辑此处发布的任何 Plunkers 时遇到了麻烦。看来他们有缓存问题。所以我为它造了一支笔:http://cdpn.io/kBqmj

不幸的是,那里不能有多个 HTML 文件,所以我对部分模板进行了硬编码,但它应该与外部文件具有相同的效果。

我将代码分成两个 Controller ,以便于调试。

主页 View 有两个链接指向同一篇文章的不同部分:

<ol>
<li><a href=\"#/article/1?scrollTo=InterestingStuff\" target=''>Article 1: Interesting stuff</a></li>
<li><a href=\"#/article/1?scrollTo=ImportantStuff\" target=''>Article 1: Don't miss it stuff</a></li>
</ol>

然后 文章 View 基本上有一些内容和两个元素,它们的 id 和以前一样:

<p>A lot of introduction, followed by something else</p>
<br>
...
<br>
<h1 id='InterestingStuff'>Interesting stuff in the middle</h1>
<br>
...
<br>
<h1 id='ImportantStuff'>Important stuff at the end</h1>

我不能确切地说出它不适合您的原因,所以请查看我的代码。我希望它至少可以作为您的解决方案的起点。

关于javascript - Angularjs $anchorScroll 在 ng-view 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16363932/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com