12

如何链接到锚A标记中的其他 AngularJS 应用程序位置？我正在使用 HTML5 无哈希模式，并希望避免页面实际重新加载。

例如，在非 HTML5 模式下，我会这样做：

<a href='#/path'>Link</a>

在 HTML5 模式下，我可以这样做：

<a href='/path'>Link</a>

但这实际上会导致浏览器重新加载新的 URL。我也尝试过使用ng-href以及/#/path语法，但它们似乎都没有像我想要的那样工作。

如何从锚标签正确链接？

4

3 回答 3

17

更新：

看起来这在不使用 $location 的情况下是可能的，你只需要保持相同的基本链接。从文档：

当你使用 HTML5 历史 API 模式时，在不同的浏览器中你会需要不同的链接，但你所要做的就是指定常规的 URL 链接，例如：<a href="/some?foo=bar">link</a>

当用户点击此链接时，

  • 在旧版浏览器中，URL 更改为 /index.html#!/some?foo=bar
  • 在现代浏览器中，URL 更改为 /some?foo=bar

在以下情况下，链接不会被重写；相反，浏览器将对原始链接执行完整的页面重新加载。

  • 包含目标元素的链接。示例：<a href="/ext/link?a=b" target="_self">链接</a>
  • 指向不同域的绝对链接。示例：<a href="http://angularjs.org/"></a>
  • 以“/”开头的链接在定义 base 时会导致不同的基本路径。示例：<a href="/not-my-base/link">链接</a>

老的：

您应该使用$location 服务。将其注入控制器并将其放在 $scope 上（或以方便的方法）：

function MainCtrl($scope,$location){
  $scope.goto = function(path){
    $location.path(path);
  }
}

<a ng-click="goto('/path')">Link</a>
于 2013-05-14T13:49:28.870 回答
0

这在启用 html5mode 的情况下对我有用。

<a ng-href='./path'>Link</a>
于 2015-06-19T16:07:29.053 回答
0

Angular Js 使用哈希前缀后跟感叹号。因此，如果您想使用锚标记，请以这种方式使用。

关联

https://docs.angularjs.org/tutorial/step_09

于 2018-04-12T12:14:27.190 回答