如何处理锚哈希链接在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+无论如何，所以我担心这不是一个可接受的解决方案:/

当前回答

我可以这样做:

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

2015-12-03 19:07:35

其他回答

如果你不喜欢使用ng-click，这里有一个替代解决方案。它使用过滤器根据当前状态生成正确的url。我的例子使用ui.router。

这样做的好处是用户可以在鼠标悬停时看到链接的位置。

<a href="{{ 'my-element-id' | anchor }}">My element</a>

过滤器:

.filter('anchor', ['$state', function($state) {
    return function(id) {
        return '/#' + $state.current.url + '#' + id;
    };
}])

2016-04-06 13:11:03

不需要更改任何路由或其他任何东西，只需要在创建链接时使用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>

在注释中没有必要使用##;-)

2015-07-19 20:33:18

我可以这样做:

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

2015-12-03 19:07:35

在我的脑海中@ slugsllog已经有了，但我要改变一件事。我会用replace代替，这样你就不用回调了。

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id).replace();
    $anchorScroll();
};

文档搜索“替换方法”

2015-02-04 19:51:00

试试这个可以解决锚的问题。

app.run(function($location, $anchorScroll){
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();

            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
});

2021-07-08 14:42:02

如何处理锚哈希链接在AngularJS

推荐文章

最新文章

标签