Javascript Angularjs$anchorScroll在ng视图中不工作

我的脚本是基于 但是我所有带有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();  
  });
})

/*截取网页锚散列用法：*/
运行（函数（$rootScope、$location、$anchorScroll、$routeParams）{
$rootScope.$on（“$routeChangeSuccess”，函数（newRoute，oldRoute）{
$location.hash（$routeParams.scrollTo）；
$anchorScroll（）；
});
})

我的一个链接

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

我要导航到的元素

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

测试

您提供的plnkr实际上没有使用$anchorScroll，但我假设在您尝试重新创建您正在使用的内容时，它已被删除。如果你把你引用的名为$anchorScroll的

Site.run

代码放回原处，它当然还是不起作用

这个问题与你的主播的href有关，它被弄坏了一点。这就是你想要的：

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

也许这就是你问题的原因。它在plnkr中不起任何作用，因为您使用的是单引号而不是双引号，但是如果您将HTML更改为使用双引号，它将按照您所述重新加载页面：

它需要一个非常有效的url，比如：“#/article/23？scrollTo=VerifyingDeviceStatus”，然后将其转换为“#/article/undefined？scrollTo=/article/23？scrollTo=VerifyingDeviceStatus”，这显然不起作用

---

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

我希望我正确理解了你的问题

似乎您希望使用AngularJS$anchorScroll链接到文章的特定部分

我很难编辑张贴在这里的任何掠夺物。他们似乎有缓存问题。 所以我为它设计了一支笔：

不幸的是，那里不能有多个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>

有很多介绍，然后是其他介绍



... 


中间有趣的东西


... 


最后是重要的东西

---

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

您需要提供更多信息或在自己的plnkr中重现您的问题。否则，任何人的答案都只是在黑暗中拍摄。这是我在保持简单的同时复制它的最好方法：嗯，我认为这就是我目前拥有的——我想我在plnkr上做了一次不好的尝试。这就是我现在页面上的链接的样子：

当我单击它们时，url看起来是这样的：

http://url.com/beta#/article/36?scrollTo=requesting-提案#请求提案

，单击后视图也会重新加载。您询问的声明将用正确的格式替换所有的HREF，因为数据库中有大量的文章，我认为这是测试它的最好方法。我尝试将数据库中的html硬编码为：

，但它仍然做同样的事情。您仍然可以执行replace语句，您只需要注意最后的href是什么。复制链接地址时，链接是什么样子的？或者您可以检查元素并检查href属性。这是href attr在dom中的样子：

，这就是它应该的样子。如果没有看到你的实际代码，我想我不能再帮你了。我能让我的最新工作plnkr使用这样的链接重新加载页面的唯一方法是，如果我取出（“$routeChangeSuccess”…位上的

$rootScope.$。谢谢。两个答案（你的和兰登的）帮助我实现了我所需要的。但是，当我尝试发送带有滚动条的url时，它不会自动滚动到该区域，你必须再次单击该链接。是否有黑客攻击？斯蒂芬：如果你使用代码笔进行测试，你将无法将url粘贴到浏览器中并期望它工作。代码笔使用iframe进行操作ual代码，因此更改浏览器url不会反映angular代码看到的url。如果您使用浏览器的web developer工具直接更改iframe src，您可以看到它到达所需的位置。我建议您在本地计算机上尝试。如果我打开scrollTo导航到url，我会在本地计算机上执行此操作最后，它会将我导航到页面顶部，但当我单击页面内的链接时，它会将我导航到propor位置。这可能是因为它在页面文档加载后加载视图吗？@Stephen:它在Chrome和Firefox上都适用于我。我想，如果不确切知道如何运行以及运行什么，我就无法再帮助你了ning。@Stephen我遇到了完全相同的问题，我生成了一个错误，然后尝试滚动，但是
$autoScroll
（使用
$location.hash（）
）似乎完全重新加载了控制器（从视图中删除了我的错误）…我也必须单击两次才能使错误保持不变…您最终找到解决此问题的方法了吗？
<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>