如何在AngularJS中处理锚点哈希链接
你们有没有人知道如何很好地处理AngularJS中的锚点哈希链接？
我有一个简单的FAQ页面的以下标记
<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>
<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>
当点击上面的任何链接时，AngularJS拦截并将我路由到一个完全不同的页面（在我的情况下，404页面没有匹配链接的路由）。
我的第一个想法是创建一个匹配“ / faq /：chapter ”的路由，并在相应的控制器中检查匹配元素后的$routeParams.chapter ，然后使用jQuery向下滚动。
但是，然后AngularJS再次对我产生了影响，只是滚动到页面的顶部。
那么，这里的任何人在过去做过类似的事情，并且知道一个很好的解决方案吗？
编辑：切换到html5mode应该可以解决我的问题，但我们必须支持IE8 +，所以我担心它不是一个可接受的解决方案：/
您正在寻找$anchorScroll() 。
这是（糟糕的）文档。
这是源代码。
基本上你只是注入它并在你的控制器中调用它，它会滚动你到$location.hash()找到的任何元素。
app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
});
<a ng-click="scrollTo('foo')">Foo</a>
<div id="foo">Here you are</div>
这是一个要展示的重要人物
编辑：使用此路由
按照惯例设置角度路由，然后添加以下代码。
app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
$location.hash($routeParams.scrollTo);
$anchorScroll();
});
});
你的链接看起来像这样：
<a href="#/test?scrollTo=foo">Test/Foo</a>
这里是一个Plunker演示使用路由和$ anchorScroll滚动
甚至更简单：
app.run(function($rootScope, $location, $anchorScroll) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
if($location.hash()) $anchorScroll();
});
});
你的链接看起来像这样：
<a href="#/test#foo">Test/Foo</a>
在我的情况下，我注意到如果我修改了$location.hash() ，路由逻辑正在踢人。 下面的技巧工作..
$scope.scrollTo = function(id) {
var old = $location.hash();
$location.hash(id);
$anchorScroll();
//reset to old to keep any additional routing logic from kicking in
$location.hash(old);
};
在创建链接时，不需要改变任何路由或其他任何东西，只需要使用target="_self"
例：
<a href="#faq-1" target="_self">Question 1</a>
<a href="#faq-2" target="_self">Question 2</a>
<a href="#faq-3" target="_self">Question 3</a>
在你的html元素中使用id属性，如下所示：
<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>
没有必要使用##在评论中指出/提到;-)
链接地址: http://www.djcxy.com/p/77617.html