Search code examples
javascripthtmlangularjsangularjs-ng-include

Angular's ng include directive not working for the expected link

Let's say I have a link

<a href="#one">Take me to one</a>

and an article:

<article id="one"><h2>This is one</h2></article>

The link takes me to the article. But after moving those 2 lines in a separate sep.html file and including sep.html in my main page (index.html) like this:

<div ng-include="'sep.html'"></div>

the link doesn't work anymore. And instead of showing .../index.html#one, the address bar shows .../index.html#/one. Manually removing the extra "/" in the address bar takes me to the right place. Why is that and how can I solve the issue?

Solution

  • Angular listens for hashchange event and prevents default browser jump-to-id behaviour. The simple way to tell Angular not to do so for your anchor links is to use target="_self" attribute:

    <a href="#one" target="_self">Take me to one</a>