Handling links from template in AngularJS

Question

currently I'm handling links this way:

<a ng-click="goToLink('/foo')">foo</a>

$scope.goToLink = function(url) {
    $location.path(url)
}

because if I do

<a ng-href="/foo">foo</a>

the page is of course reloaded(and getting 404), because it should be something like:

<a ng-href="#/foo">foo</a>

Is there a directive or something to define links that are 'html5 mode agnostic', so that I don't have to put the hashtag in every link?

Something like

<a ng-smart-href="/foo">foo</a>.

SunnyShah · Accepted Answer · 2013-01-25 14:21:30Z

5

Check ng-href, It is exactly what you are looking for. http://docs.angularjs.org/api/ng.directive:ngHref

Check "Relative links" example from http://docs.angularjs.org/guide/dev_guide.services.$location

edited Jan 25, 2013 at 14:21

answered Jan 25, 2013 at 14:13

SunnyShah

30.6k30 gold badges97 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

martinpaulucci Over a year ago

When I try <a ng-href="/foo">foo</a> I get a full page reload. Am I doing something wrong?

SunnyShah Over a year ago

@sammla, Have you checked the example of $location?

martinpaulucci Over a year ago

Yes, and I see its working there, but I can't figure out what configuration I am missing. I tried adding a base href with no luck. And the example says "Here you can see two $location instances, both in Html5 mode" and in the script I see $locationProvider.html5Mode(true).hashPrefix('!'); (I am using hashbang mode), but in the example it uses hashbang. It's kind of confusing.. :S

Nathan · Accepted Answer · 2014-06-24 16:58:23Z

0

In HTML5 mode, will rewrite <a href="/foo">link to foo</a> to hash-bang mode if in a legacy browser:

See the documentation on this: Using $location, Html link rewriting.

answered Jun 24, 2014 at 16:58

Nathan

1,8711 gold badge21 silver badges35 bronze badges

Collectives™ on Stack Overflow

Handling links from template in AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related