Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Handling links from template in AngularJS

Tags:

angularjs

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>.
like image 459
martinpaulucci Avatar asked Jan 25 '13 14:01

martinpaulucci


People also ask

How do I bind a href in AngularJS?

The ng-href directive overrides the original href attribute of an <a> element. The ng-href directive should be used instead of href if you have AngularJS code inside the href value. The ng-href directive makes sure the link is not broken even if the user clicks the link before AngularJS has evaluated the code.

What is templateUrl in angular?

The angular component decorator provides a property called templateUrl and using this property you can set the external HTML file path. By default, angular creates an HTML file with the name app. component. html within the app folder when you create a new angular project.

What is Link function is used for in AngularJS?

link function is basically used to manipulate the DOM( Document Object Model ) element using custom directive. link option in custom directive registers DOM listener and also update the DOM.


1 Answers

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

like image 185
SunnyShah Avatar answered Oct 17 '22 19:10

SunnyShah