AngularJS <a>标记链接不起作用

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);
    }
}]);

$ locationProvider上的Angular Docs

html5mode vs hashbang模式的好处

Answer 3

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

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

和修复:

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

注意'page'之后的反斜杠('/').

不确定这是否适用于其他情况,但试一试!