After performing a search, I have an array of objects that needs to be displayed on the template using ng-repeat. The issue arises when constructing the URL for each item in the array – although the ng-href and href attributes are correct, clicking on the link does not load the page. Surprisingly, if I refresh the browser after clicking the link, the page loads successfully. It seems like Angular is changing the URL bar but failing to trigger a page load.
Unfortunately, I cannot replicate this problem in a jsfiddle because it involves loading JSON data into the template after a $resource.query() function, which cannot be done in a jsfiddle environment. When I tried simulating the query with static data, the jsfiddle worked fine even though the final markup appeared identical.
The structure of the AngularJS template causing the issue:
<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>
Upon data rendering, the final markup looks like this:
<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 as follows:
GuideControllers.controller('VideoSearchResultsCtrl', ['$scope', '$location', 'VideoSearch',
function($scope, $location, VideoSearch) {
$scope.videos = VideoSearch.query({ namespace: "api", resource: "videos", action: 'search', q: $location.search().q });
}
]);
I am using AngularJS 1.2-rc.3 and have also attempted to use ng-click and onclick with static URLs, but neither triggers the page load. Interestingly, non-Angular links on the same page work without any issues, such as the Menu Bar and Sign Out links.
I'm unsure what mistake I might have made here or if this could potentially be a bug within AngularJS?