你们中的任何人都知道如何在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 +所以我担心它不是一个公认的解决方案:/
我的印象是Angular会重写在tempaltes中的锚标记的href属性中出现的URL,这样无论是在html5模式还是hashbang模式下它们都能正常工作.位置服务的文档似乎说HTML链接重写处理了hashbang情况.因此,我希望在不在HTML5模式下,插入哈希值,并且在HTML5模式下,它们不会.
但是,似乎没有重写.以下示例不允许我只更改模式.应用程序中的所有链接都需要手动重写(或者在运行时从变量派生.我是否需要根据模式手动重写所有URL？
我没有在Angular 1.0.6,1.1.4或1.1.3中看到任何客户端URL重写.似乎所有href值都需要以#/为hashbang模式和/为html5模式.
是否有必要进行重写？我误读了文档吗？做些别傻话？
这是一个小例子:
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.js"></script>
</head>
<body>
<div ng-view></div>
<script>
angular.module('sample', [])
.config(
['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
//commenting out this line (switching to hashbang mode) breaks the app
//-- unless # is added to the templates
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
template: 'this is home. go to <a href="/about"/>about</a>'
});
$routeProvider.when('/about', {
template: 'this is about. go to <a href="/"/>home</a'
});
}
])
.run();
</script>
</body>
附录:在重新阅读我的问题时,我发现我使用了"重写"一词,但没有明确说明我何时以及何时进行重写.问题是如何让Angular在呈现路径时重写URL,以及如何在两种模式下统一解释JS代码中的路径.它不是关于如何使Web服务器执行HTML5兼容的请求重写.