Invalid AngularJS Links

Question

I have an index of objects returned from a search. The template has ng-repeat, where the URL of the element is created from the data in the model, but the tag "a" does not work in the final markup. Ng-href and href are correct, the URL bar changes when the link is clicked, but the page does not load. Performing a browser refresh after a click gives you a page. So, something in Angular is changing the URL string, but not causing the load.

It is not possible to make this play in jsfiddle because the problem is loading json into the template after the $ resource.query () function, which I cannot do from jsfiddle. With a simulated query loading static data, jsfiddle works, although the final markup looks the same.

AngularJS template is as follows:

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

Controller Code:

 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 also tried using ng-click and the plain old onclick to get a page loaded even with a static url, but clicks never run the code. BTW static non angular links on this page work, so menus and outputs work.

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

Answer 1

From the mailing list I got the answer:

Have you accidentally configured your $ locationProvider to html5Mode? If so, it will cause your problems. You could force this to always go to the URL by adding target = "_ self" in your tag. Give it a shot.

I configured to use HTML5, so adding the target="_self" tag to the tag fixes the problem. Still exploring why this works.

Answer 2

Not sure if this has been updated since replying to this post, but you can customize this when the application starts. If the rewriteLinks parameter is set to false, then you activate the a tags again, but at the same time leave html5mode , which gives its advantages. I added a bit of logic around these settings to return html5mode to browsers where window.history not supported (IE8)

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

Corner documents at $ locationProvider

Advantages of html5mode vs hashbang mode

Answer 3

I know this post is old, but I recently ran into this problem. There was a base on my .html page

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

and fix:

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

note the backslash ('/') after the "page".

Not sure if this applies to other cases, but try it!

Answer 4

AngularJS suffers from sparse documentation, I hope that their gaining effect will improve it. I think AngularJS is primarily intended as a SPA , and perhaps the idea of ​​deactivating all tags by default makes it easy to incorporate angular into some existing html.

This allows you to quickly refactor the default “routing” behavior of the “traditional” website (well, script pages linked to each other) into the angular routing system, which is more suitable for the MVC approach, better suited for web applications.

Answer 5

Find this line:

 $locationProvider.html5Mode(true) 

change it to:

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

and include this line at the beginning of index.html if you don’t have one.

 <base href="/"> 

Answer 6

I see that this is old, but this is one of the best results on Google. So if you are using Angular 7 and want to link only a couple of files, just put the "assets" directory:

Now that you want to link the file, you can simply use the href tag as shown below:

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

Note: by default, you can only link to the resource folder, so you strictly need to put your files there.