AngularJS | ng-href Directive

The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value than it may go to wrong URL and the link will be broken and will most likely return a 404 error while ng-href directive checks that the link is not broken even if the link is clicked before the code evaluation by AngularJS.

Syntax:

 <element ng-href="addr"> content ... </element> 

Where addr refers to the string containing angular expression.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
   1.6.9/angular.min.js"></script>
  <body ng-app="" style="text-align:center">
    <div ng-init="url = 'https://www.geeksforgeeks.org/'">
    <h1 style="color:green">GeeksforGeeks</h1>
                <h2>ng-href Directive</h2>
    <p>Go to <a ng-href="{{url}}">GeeksforGeeks</a></p>
    </div>
  </body>
</html

chevron_right


Output:
ng-href



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.