Question

我的脚本基于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>

Answer 1

我希望我能正确理解你的问题。

您似乎想要使用AngularJS $ anchorScroll链接到文章的特定部分来执行此操作。

编辑这里发布的任何掠夺者我都遇到了麻烦。它们似乎有缓存问题。所以我为它创建了一支笔：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>

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

Answer 2

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

这个问题与你的主播的href有关，后者有点受损。这就是你想要的：

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

当您使用哈希导航时，事情会有所不同。与您提供的工作示例一样，hash在url的开头使用，而scrollTo“querystring”参数不需要额外的＃，因为它是$ anchorScroll所暗示的。

修正了plnkr：http://plnkr.co/edit/Y1pHKjnAgo6hwjQvardy?p=preview

〜

以下陈述有什么处理？

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

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

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

它需要一个完美的工作网址：“＃/ article / 23？scrollTo = VerifyingDeviceStatus”并将其转换为“＃/ article / undefined？scrollTo = / article / 23？scrollTo = VerifyingDeviceStatus”，这显然赢得了'工作。

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

Angularjs $ anchorScroll在ng-view中不起作用

2 个答案: