68

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?

3
  • Are you using ngRoute? Is there a <base> tag in your page?
    – Blackhole
    Commented Nov 4, 2013 at 17:43
  • can use plunker to load json very easily for demos
    – charlietfl
    Commented Nov 4, 2013 at 17:44
  • load json but not from a server running on my laptop. It turned out the be a $locationProvider configured to HTML5, see below. So nothing to do with loading, just didn't put the locationProvider config in the jsfiddle. In general I alway try to reproduce on plnkr or jsfiddle but many problems are too complex. This one is a good example. @Blackhole, no to both. It was HTML5 mode that got me.
    – pferrel
    Commented Nov 4, 2013 at 18:06

6 Answers 6

165

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.

6
  • 3
    Thank you very much! This was exactly my problem. Unfortunately, the Angular doc page isn't very helpful, saying only that this flag enables "Use HTML5 strategy if available."
    – fool4jesus
    Commented Jan 16, 2014 at 17:47
  • 1
    @pferrel thank you! You have no idea how much time I've spent trying to fix my redirecting issue until I came across this post.
    – Nolan
    Commented Jan 20, 2016 at 22:58
  • Just tried this and for me it reloads the whole page. Kind of self defeating in a SPA app. I don't want my shell to re-render and I'm pretty sure my frameworks and scripts/css are all reloaded (albeit they should be cached). I've got this working in a previous app so will continue looking for a way (can't tell from looking at previous code)
    – Shumii
    Commented May 21, 2016 at 6:58
  • I just made mine work. My issue was I had not set up my route correctly. I was passing a parameter but had not defined the parameter in the route. So mine was a quick easy fix. However, my point above remains that when navigating with an SPA app we should never need to reload the entire app.
    – Shumii
    Commented May 21, 2016 at 7:05
  • 1
    This just saved me from a very embarrassing failed demo. I would kiss you if it wasn't weird and geographically impossible
    – Paul
    Commented Jan 10, 2018 at 2:46
12

Not sure if this has been updated since this post was answered, but you can configure this in application startup. Setting the rewriteLinks to false re-enables your a tags, but still leaves html5mode on, which comes with all its own benefits. I have added a bit of logic around these settings to revert html5mode in browsers where window.history is 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);
    }
}]);

Angular Docs on $locationProvider

The benefits of html5mode vs hashbang mode

1
  • @pferrel has temporary fix but your point is the permanent fix. "Setting the rewriteLinks to false re-enables your a tags". Thanks. Commented Feb 12, 2018 at 2:28
6

I know this post is old, but I recently ran into this problem as well. My .html page had the base

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

and the fix:

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

notice the forward-slash ('/') after 'page'.

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

1
  • 2
    Hate to be pedantic, but '/' is a forward-slash. '\' is a backslash. :) Commented Mar 19, 2017 at 21:31
1

AngularJS suffers from a sparse documentation, I hope their gaining momentum will improve it. I think AngularJS is primarily intended as a SPA, and maybe the idea behind deactivating by default all a tags allows one to easily incorporate angular into some already existing html.

This allows for quick refactoring of the default "routing" behaviour of a "traditional" website (well, script pages linked between each other) into the angular routing system, which is more of an MVC approach, better suited for Web Apps.

1

Find this line:

$locationProvider.html5Mode(true)

change it for:

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

and include this line in the head of index.html if you don't have it.

<base href="/">
1
  • Find this line... in which file? angular.js itself, or... ? (I'm hoping we're not actually supposed to mess with the actual angular script.) Commented Mar 19, 2017 at 21:43
0

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

Angular project structure for files

Now when you want to link the file you can just use the href tag as below:

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

Note: you can only link to the assets folder by default, so you strictly have to place your files there.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.