1

我的脚本基于http://plnkr.co/edit/De6bBrkHpojgAbEvHszu 但我所有与 ID 锚点的链接都在视图内，每次点击它都不会将我带到它只是重新加载视图的元素。有任何想法吗？

我正在使用的脚本

/*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>
4

2 回答 2

2

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

似乎您想使用 AngularJS $anchorScroll 链接到文章的特定部分来做到这一点。

我在编辑此处发布的任何 Plunker 时遇到了麻烦。他们似乎有缓存问题。所以我为它制作了一支笔：http: //cdpn.io/kBqmj

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

我将代码分成两个控制器，以便于调试。

主页视图有两个链接指向同一篇文章的不同部分：

<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>

然后文章视图基本上有一些内容和两个元素，其 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>

我不能确切地说为什么它不适合你，所以看看我的代码。我希望它至少可以作为您解决方案的起点。

于 2013-05-11T19:50:45.883 回答
1

您提供的 plnkr 实际上并没有使用 $anchorScroll，但我假设当您尝试重新创建您正在使用的内容时已将其删除。如果您放回Site.run您引用的名为 $anchorScroll 的代码，它当然仍然不起作用。

问题与您的锚的href有关，它被破坏了一点。这就是你想要的：

<a href='#?scrollTo=VerifyingDeviceStatus' target=''>...</a>

当您使用哈希进行导航时，情况会有所不同。在您提供的工作示例中，在 url 的开头使用了 hash，并且 scrollTo "querystring" 参数不需要额外的 #，因为它是由 $anchorScroll 暗示的。

固定 plnkr：http ://plnkr.co/edit/Y1pHKjnAgo6hwjQvardy?p=preview

~

下面的语句是怎么回事？

var result = data[0].content.replace(/href="#/g, 'href="#/article/' + slug + '?scrollTo=');

也许这是您的问题的原因。它在 plnkr 中没有做任何事情，因为您使用的是单引号而不是双引号，但是如果您将 HTML 更改为使用双引号，它会按照您的描述重新加载页面：

http://plnkr.co/edit/sdxjlRWkiLr53L6MELTZ?p=preview

它需要一个完美工作的 url，例如：“#/article/23?scrollTo=VerifyingDeviceStatus”并将其转换为“#/article/undefined?scrollTo=/article/23?scrollTo=VerifyingDeviceStatus”，这显然不起作用。

你到底想用这个 RouteController 做什么？

于 2013-05-07T17:08:35.570 回答