本文介绍了AngularJS 在哈希标记后提出斜线/的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试将 AngularJS $anchorScroll 与 $location.hash.但是,当我设置哈希值时,AngularJS 会在/之后添加一个正斜杠.

例如网址为:http://localhost:13060/Dashboard.当我不包含 AngularJS 库时,我可以单击链接 #contact,然后转到 http://localhost:13060/Dashboard#contact.>

但是当我包含 AngularJS 并单击链接时,它会转到 http://localhost:13060/Dashboard#/contact 阻止 $anchorScroll 工作.

编辑 $anchorScroll 不起作用

起始 URL 是 http://localhost:13060/Category.当我添加一个类别时,它应该转到 http://localhost:13060/Category#/#id(其中 id 是新 id)并向下滚动页面到它.URL 正在正确更新,但 $anchorScroll 未滚动.

//跳转到新类别$location.path("");$location.hash(cat.ID);$anchorScroll();
解决方案

除非您使用 html5mode,它会从 angular routing 中删除哈希,否则您将有 2 个哈希,一个用于角度路由,另一个用于锚点.

http://localhost:13060/Dashboard#/#contact

假设您将路由路径设置为 /profiles 并且锚点位于该视图中,则 url 将如下所示:

http://localhost:13060/Dashboard#/profiles#contact

I'm trying to use AngularJS $anchorScroll with $location.hash. However, when I set the hash, AngularJS adds a forward slash, / after it.

For example, the url is: http://localhost:13060/Dashboard. When I don't include the AngularJS library, I can click the link, #contact, and go to http://localhost:13060/Dashboard#contact.

But when I include AngularJS and click the link, it goes to http://localhost:13060/Dashboard#/contact preventing $anchorScroll from working.

Edit $anchorScroll not working

The starting URL is http://localhost:13060/Category.When I add a category, it should go to http://localhost:13060/Category#/#id (where id is the new id) and scroll down the page to it. The URL is correctly updating but $anchorScroll is not scrolling.

 //jump to new category
 $location.path("");
 $location.hash(cat.ID);
 $anchorScroll();
解决方案

Unless you use html5mode, which removes the hash from angular routing, you will have 2 hashes, one for angular routing and other for anchors.

http://localhost:13060/Dashboard#/#contact

Assuming you had a route path set as /profiles and anchor was in that view the url would look like:

http://localhost:13060/Dashboard#/profiles#contact

这篇关于AngularJS 在哈希标记后提出斜线/的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

06-22 16:40