ngHref

如果我们在 href 值内有一个角度表达式，则使用 ngHref 代替 href 属性。ngHref 指令使用 href 属性（如标记，标记等）覆盖 html 标记的原始 href 属性。

即使用户在 AngularJS 评估代码之前单击链接，ngHref 指令也确保链接不会中断。

例 1

<div ng-init="linkValue = 'http://stackoverflow.com'">
    <p>Go to <a ng-href="{{linkValue}}">{{linkValue}}</a>!</p>
</div>

示例 2 此示例动态从输入框获取 href 值并将其加载为 href 值。

<input ng-model="value" />
<a id="link" ng-href="{{value}}">link</a>

例 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">