AngularJS Tutorial - ng-href

To dynamically create a URL from a property in scope, use ng-href instead of href.

ng-href is recommended to use in place of href.

Example

The following code shows how to ng-href.


<!doctype html>
<!--<!--from  w w w  .j a  v a 2 s.com-->
Created using JS Bin
http://jsbin.com

Copyright (c) 2014 by auser (http://jsbin.com/IgInopi/1/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>

  <!-- Always use ng-href when href includes an {{ expression }} -->
  <a ng-href="{{myHref}}">I'm feeling lucky, when I load</a>

  <!-- href may not load before user clicks -->
  <a href="{{myHref}}">I'm feeling 404</a>

  <script>

    angular.module('myApp', [])
    .run(function($rootScope, $timeout) {

      $timeout(function() {
        $rootScope.myHref = 'http://example.com';
      }, 2000);

    })
  </script>

</body>
</html>

The code above is rendered as follows: