In angular js {{i.link}} for attribute href on element a showing w3c validation error

Question

My Html code with Angular js:

<li data-ng-repeat="i in items | searchFor:searchString | limitTo:limit" >
                        <p><a href="{{i.link}}" class="search-link">{{i.title}}</a></p>
                        <p>{{i.description}}</p>
                        <p><a class="small" href="{{i.link}}">{{i.link}}</a></p>                
                    </li>

W3c Validation giving error like below :
Bad value {{i.link}} for attribute href on element a: Illegal character in path segment: { is not allowed.

Answer 1

Use ng-href for this. Angular will transform it to the correct value.

https://docs.angularjs.org/api/ng/directive/ngHref

Finally - using data-ng-href will solve the problem with validation problems. (Related SO question What is the difference between ng-app and data-ng-app? )

Answer 2

You should use ngHref . That is what AngularJS recommends. The W3C validation error will also get resolved. Also if you use href there will be issue of broken link.