如何处理锚哈希链接在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。然后使用jQuery向下滚动到它。

但是AngularJS又把我搞砸了，反正就是滚动到页面顶部。

有人在过去做过类似的事情并且知道一个好的解决方法吗?

编辑:切换到html5Mode应该解决我的问题，但我们有点必须支持IE8+无论如何，所以我担心这不是一个可接受的解决方案:/

当前回答

基于@Stoyan，我想出了以下解决方案:

app.run(function($location, $anchorScroll){
    var uri = window.location.href;

    if(uri.length >= 4){

        var parts = uri.split('#!#');
        if(parts.length > 1){
            var anchor = parts[parts.length -1];
            $location.hash(anchor);
            $anchorScroll();
        }
    }
});

2018-04-26 21:02:39

其他回答

基于@Stoyan，我想出了以下解决方案:

app.run(function($location, $anchorScroll){
    var uri = window.location.href;

    if(uri.length >= 4){

        var parts = uri.split('#!#');
        if(parts.length > 1){
            var anchor = parts[parts.length -1];
            $location.hash(anchor);
            $anchorScroll();
        }
    }
});

2018-04-26 21:02:39

上面的方法对我都没用，但我刚试了一下，而且很管用，

<a href="#/#faq-1">Question 1</a>

所以我意识到我需要通知页面从索引页开始，然后使用传统的锚。

2015-04-21 17:57:33

我可以这样做:

<li>
<a href="#/#about">About</a>
</li>

2015-12-03 19:07:35

我试图让我的Angular应用在加载时滚动到一个锚点，却遇到了$routeProvider的URL重写规则。

经过长时间的试验，我确定了这一点:

注册一个文档。的.run()部分中的Onload事件处理程序 Angular的app模块。在处理程序中找出原来的锚标签应该是通过做一些字符串操作。覆盖的位置。哈希与剥离锚标记(其中导致$routeProvider立即再次覆盖它 “# /”规则。但这没关系，因为Angular现在与 URL调用$anchorScroll()中发生了什么。

[], angular.module (bla)。}]) .run(函数(位置,anchorScroll美元){ $(文档)时函数(){ 如果位置。location.hash.length>=1) { Var path = location.hash; var potentialAnchor = path.substring(path.lastIndexOf("/")+1); if($(“#”+ potentialAnchor)。长度> 0){//确保该标签在doc中存在。的位置。hash = potentialAnchor; 美元anchorScroll (); ｝｝ })；

2014-10-22 02:59:39

<a href="/#/#faq-1">Question 1</a>
<a href="/#/#faq-2">Question 2</a>
<a href="/#/#faq-3">Question 3</a>

2015-05-19 20:32:43

如何处理锚哈希链接在AngularJS

推荐文章

最新文章

标签