AngularJS is putting forward slash / after hash tag

Question

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();

Unmerciful

Answer 1

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

Ogden

I have the URL correctly formatted now, but $anchorScroll() isn't scrolling down to the page. – Unmerciful

I'll be honest, i've never used anchorscroll. Does $location.hash() output what you would expect ( the second hash) ? – Ogden

Yes, it updates the hash correctly (when I specify the path), but then nothing happens other than the URL browser bar reflecting the change. – Unmerciful

I discovered the issue. I have the $anchorScroll in the result of the promise (i.e. categories.then) and I change the $scope. I was invoking the hash function before the $scope change propagated to the view and thus the hash wasn't there so it wouldn't scroll. I added a timeout to the $anchorScroll which fixed it. – Unmerciful

@Unmerciful would be nice to see a jsfiddle or something, I have the same problem but I don't see how exactly / where you have added the $location.path(""); $location.hash(cat.ID); – Cathead