Thursday, October 29, 2015

Angular–Strange ng-click issue

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, the url is reset to” 

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:

No comments: