AngularJS – ngHref 指令

AngularJS 中的ngHref 指令解决了链接断开时替换标记的问题，从而导致系统返回 404 错误。我们应该使用ngHref指令，而不是在href属性中使用{{hash}}之类的标记来更改或替换标记值，因为该链接可能会被破坏，从而导致返回系统错误。

语法

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

示例 - ngHref 指令

在您的 Angular 项目目录中创建一个文件“ ngHref.html ”并复制粘贴以下代码片段。

<!DOCTYPE html>
<html>
   <head>
      <title>ngHref Directive</title>

      <script xx_src="https://cdn.staticfile.org/angularjs/1.6.9/angular.min.js">             </script>
   </head>

   <body ng-app="" style="text-align: center;">
      <h1 style="color: green;">
         Welcome to nhooo.com
      </h1>
      <h2>
         AngularJS | ngHref Directive
      </h2>
      <div ng-init="url ='https://www.nhooo.com/index.htm'">
         <p>Go to <a ng-href="{{url}}">nhooo</a></p>
      </div>
   </body>
</html>

输出结果

要运行上述代码，只需转到您的文件并将其作为普通 HTML 文件运行即可。

<video "="" controls="" xx_src="https://www.nhooo.com/assets/questions/media/57427/3919798-1633687678.mp4">您的浏览器不支持 HTML5 视频。

示例 2

在您的 Angular 项目目录中创建一个文件“ ngHref.html ”并复制粘贴以下代码片段。

<!DOCTYPE html>
<html>
   <head>
      <title>ngHref Directive</title>

      <script xx_src="https://cdn.staticfile.org/angularjs/1.6.9/angular.min.js">      </script>
   </head>

   <body ng-app="" style="text-align: center;">
      <h1 style="color: green;">
         Welcome to nhooo.com
      </h1>
      <h2>
         AngularJS | ngHref Directive
      </h2>
      <input ng-model="value" /><br />
      <a id="link-1" href ng-click="value = 1">link 1</a> (link, This link will not reload)<br/>
      <a id="link-2" href="" ng-click="value = 2">link 2</a> (link,This link will not reload)<br />
      <a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, Thislink will reload!)<br />
      <a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (nolink)<br />
      <a id="link-6" ng-href="{{value}}">link</a> (link, change location)
   </body>
</html>

输出结果

要运行上述代码，只需转到您的文件并将其作为普通 HTML 文件运行即可。您将在浏览器窗口中看到以下输出。

基础教程