Question

我有一个从搜索返回的对象索引。模板具有ng-repeat，其中项目的URL由模型中的数据构成，但在最终标记中，“a”标记不起作用。 ng-href和href是正确的，当单击链接但页面未加载时，URL栏会更改。单击确实获取页面后执行浏览器刷新。因此，Angular中的某些内容正在更改URL栏但不会触发加载???

无法在jsfiddle中重现此问题，因为问题似乎是在$ resource.query（）函数之后将json加载到模板中，我无法从jsfiddle执行此操作。通过模拟查询加载静态数据，即使最终标记看起来相同，jsfiddle也可以工作。

AngularJS模板如下所示：

<div ng-controller="VideoSearchResultsCtrl" class="row-fluid">
  <div class="span12" >
    <div class="video_thumb" ng-repeat="video in videos">
      <p>
        <a ng-href="/guides/{{video._id}}" data-method="get">
          <img ng-src="{{video.poster.large_thumb.url}}">
        </a>
      </p>
    </div>
  </div>
</div>

结果看起来很好并产生以下最终标记：

<div ng-controller="VideoSearchResultsCtrl" class="row-fluid ng-scope">
  <div class="span12">
    <!-- ngRepeat: video in videos --><div class="video_thumb ng-scope" ng-repeat="video in videos">
      <p>
        <a ng-href="/guides/5226408ea0eef2d029673a80" data-method="get" href="/guides/5226408ea0eef2d029673a80">
          <img ng-src="/uploads/video/poster/5226408ea0eef2d029673a80/large_thumb_2101146_det.jpg" src="/uploads/video/poster/5226408ea0eef2d029673a80/large_thumb_2101146_det.jpg">
        </a>
      </p>
    </div><!-- end ngRepeat: video in videos -->
  </div>
</div>

控制器代码为：

GuideControllers.controller('VideoSearchResultsCtrl', ['$scope', '$location', 'VideoSearch',
    function($scope, $location, VideoSearch) {
        $scope.videos = VideoSearch.query({ namespace: "api", resource: "videos", action: 'search', q: $location.search().q });
    }
]);

使用AngularJS 1.2-rc.3。我也尝试使用ng-click和常规旧onclick来加载页面，即使使用静态URL，但点击从不触发代码。此页面上的BTW静态非角度链接可以正常工作，因此菜单栏和注销工作。

我在这里做错了什么，或者这是AngularJS中的错误？

Answer 1

从邮件列表中我得到了答案：

您是否有机会配置您的$ locationProvider html5Mode？如果是，这将导致您的问题。你可以强迫它通过在标签中添加target =“_ self”来始终转到网址。给它是一个镜头。

我已配置为使用HTML5，因此在标记中添加target="_self"可解决问题。仍在研究其原因。

Answer 2

自从回复此帖后，不确定是否已更新，但您可以在应用程序启动时进行配置。将rewriteLinks设置为false会重新启用a标记，但仍然会启用html5mode，这会带来所有好处。我在这些设置中添加了一些逻辑，以便在不支持html5mode的浏览器中恢复window.history（IE8）

app.config(['$locationProvider', function ($locationProvider) {

    if (window.history && window.history.pushState) {
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: true,
            rewriteLinks: false
        });
    }
    else {
        $locationProvider.html5Mode(false);
    }
}]);

Angular Docs on $locationProvider

The benefits of html5mode vs hashbang mode

Answer 3

我知道这篇文章很老，但我最近遇到了这个问题。我的.html页面有基础

//WRONG!
<base href="/page" />

和修复：

//WORKS!
<base href="/page/" />

注意'page'后的反斜杠（'/'）。

不确定这是否适用于其他情况，但请试一试！

Answer 4

AngularJS的文档很少，我希望它们的发展势头能够改善它。我认为AngularJS主要用作SPA，也许默认情况下停用所有标签背后的想法允许人们轻松地将角度合并到一些已经存在的html中。

这允许快速重构“传统”网站（以及彼此之间链接的脚本页面）的默认“路由”行为到角度路由系统，这更像是MVC方法，更适合Web应用程序

Answer 5

找到这一行：

$locationProvider.html5Mode(true)

将其更改为：

$locationProvider.html5Mode(true).hashPrefix('!')

如果你没有，请在index.html的头部包含这一行。

<base href="/">

Answer 6

我看到这很老了，但这是Google上最好的结果之一。因此，如果您使用的是Angular 7，并且只想链接几个文件，则只需将放入“资产”目录：

现在，当您要链接文件时，只需使用href标记，如下所示：

  <img src="assets/ang_1.png" alt="Angular">

注意：默认情况下，您只能链接到资产文件夹，因此您必须严格将文件放置在该文件夹中。

AngularJS <a> tag links not working</a>

6 个答案: