AngularJS Built-in directives ngHref
Example
ngHref is used instead of href attribute, if we have a angular expressions inside href value. The ngHref directive overrides the original href attribute of an html tag using href attribute such as tag, tag etc.
The ngHref directive makes sure the link is not broken even if the user clicks the link before AngularJS has evaluated the code.
Example 1
<div ng-init="linkValue = 'http://stackoverflow.com'">
<p>Go to <a ng-href="{{linkValue}}">{{linkValue}}</a>!</p>
</div>
Example 2 This example dynamically gets the href value from input box and load it as href value.
<input ng-model="value" />
<a id="link" ng-href="{{value}}">link</a>
Example 3
<script>
angular.module('angularDoc', [])
.controller('myController', function($scope) {
// Set some scope value.
// Here we set bootstrap version.
$scope.bootstrap_version = '3.3.7';
// Set the default layout value
$scope.layout = 'normal';
});
</script>
<!-- Insert it into Angular Code -->
<link rel="stylesheet" ng-href="//maxcdn.bootstrapcdn.com/bootstrap/{{ bootstrap_version }}/css/bootstrap.min.css">
<link rel="stylesheet" ng-href="layout-{{ layout }}.css">
