angularjs ng-href doesn't work in ie8

2020-08-03 04:46发布

问题:

We are building a site which needs to work in IE8( be functional at least), and we got some links which doesn't work, common for all of them is that they use ng-href instead of href which works fine.

so this does not work:

<a ng-href="/User/Index/{{item.MetaData.Author.Id}}">{{item.MetaData.Author.FullName}}</a>

but this does work:

<a href="/User/Index/{{item.MetaData.Author.Id}}">{{item.MetaData.Author.FullName}}</a>

After angular has done is bindings the link looks like this:

<a class="ng-binding" href="/User/Index/15143" ng-href="/User/Index/15143" jQuery191021026375357298033="135">Niclas Schumacher <!-- IE fix --></a>

I asssume that it is angular adding the IE fix for IE8.

other things made which angular work fine, but its pretty crusial that the links will work!

anyone who has had this error, or knows how to fix it ? OR is it so VERY crusial to have ng-href instead of href, when using angularjs ?

Hope you can help, thanks in advance!

回答1:

Encountered a similar problem (from the question's text I'm not sure if it's the same). Either way, here's my problem and what got me working:

Problem:

Apparently there are problems when using href or ng-href [1] in IE8 (I am using 1.2.18 at this time) in which they don't get evaluated.

Example:

If angular finds a link without both name and a href, it adds it automatically, therefor, a code like:

<a ng-href="redirectTo()">link</a>

will end up as

<a href="" ng-href="redirectTo()">link</a>

and the redirect to baseUrl due to "" (the first page of the application) is performed upon click and the ng-href does not override the value in href.

The trick I used was to convert the link to an anchor (to not have to change depending code)

<a name="someRandomName" ng-click="redirectTo()">link</a>

and change the return statement of redirectTo() to do a redirect (either with window.location.href or $location.path, depending on the URL needed) instead of simply returning the URL.

[1] ngHref: https://docs.angularjs.org/api/ng/directive/ngHref