A colleague asked me to have a look at the following issue he had:
“I have the following problem inside my Angular application: I’m using the ngclick to capture the click event on a link and call a method on my controller that uses the UI routing to navigate to a different page inside my SPA. However when I click on the link, the navigation occurs as expected but I also see that the URL in my address bar is set to the root domain. To give an example, instead of showing my.spa.com#product/1/edit, the url is reset to my.spa.com.”
And here is the code he was using:
When I started to debug the problem, I noticed that 2 click events were triggered when you click on the link. The first click event handles the ng-click as you would expect but the second click executes the normal action when clicking on a url(in this case, as the href attribute was empty, it triggers a navigation to the root url, explaining the strange behavior in the address bar).
I was able to fix the issue, by adding a # to the href attribute: