AngularJS <a>标签链接不起作用 [英] AngularJS <a> tag links not working

问题描述

我有一个从搜索返回的对象索引.该模板有一个 ng-repeat，其中项目的 URL 是根据模型中的数据构造的，但在最终标记中，a"标签不起作用.ng-href 和 href 是正确的，单击链接时 URL 栏会发生变化，但页面未加载.单击后进行浏览器刷新确实获得了页面.因此，Angular 中的某些内容正在更改 URL 栏但未触发加载???

无法在 jsfiddle 中重现这个问题，因为问题似乎在于在 $resource.query() 函数之后将 json 加载到模板中，而我无法从 jsfiddle 中做到这一点.通过模拟查询加载静态数据，即使最终标记看起来相同，jsfiddle 也能工作.

AngularJS 模板如下所示:

<div class="span12" ><div class="video_thumb" ng-repeat="视频中的视频"><p><a ng-href="/guides/{{video._id}}" data-method="get"><img ng-src="{{video.poster.large_thumb.url}}"></a></p>

结果看起来不错，并生成以下最终标记:

<div class="span12"><!-- ngRepeat:视频中的视频--><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/5226408ea0eef2d029673a10jpg_tjpg_629673a10jpg_thumb2</a></p></div><!-- end ngRepeat:视频中的视频-->

控制器代码为:

GuideControllers.controller('VideoSearchResultsCtrl', ['$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，但点击永远不会触发代码.顺便说一句，此页面上的静态非角度链接有效，因此菜单栏和注销有效.

我在这里做错了什么还是这是 AngularJS 中的错误?

解决方案

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

<块引用>

您是否曾将您的 $locationProvider 配置为html5模式?如果是，这会导致您的问题.你可以强行通过在标签中添加 target="_self" 来始终访问 url.给这是一个镜头.

我已配置为使用 HTML5，因此将 target="_self" 添加到标记中解决了该问题.仍在研究为什么会这样.

I have an index of objects returned from search. The template has an ng-repeat where the item's URL is constructed from data in the model but in the final markup the "a" tag does not work. The ng-href and href are correct, the URL bar changes when the link is clicked but the page does not load. Doing a browser refresh after the click does get the page. So something in Angular is changing the URL bar but not triggering a load???

Can't make this reproduce in a jsfiddle because the problem seems to be in loading the json into the template after a $resource.query() function, which I can't do from a jsfiddle. With a simulated query loading static data the jsfiddle works even though the final markup looks identical.

The AngularJS template looks like this:

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

The results look fine and produce the following final markup:

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

The controller code is:

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

Using AngularJS 1.2-rc.3. I've also tried using an ng-click and regular old onclick to get a page loaded even with static URL but the clicks never trigger the code. BTW static non-angular links on this page do work, so the Menu Bar and Sign Out work.

What have I done wrong here or is this a bug in AngularJS?

解决方案

From the mailing list I got an answer:

Have you by any chance configured your $locationProvider to html5Mode? If yes this would cause your problems. You could force it to always go to the url by adding target="_self" to your tag. Give it a shot.

I had configured to use HTML5 so adding the target="_self" to the tag fixed the problem. Still researching why this works.

这篇关于AngularJS &lt;a&gt;标签链接不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！