AngularJS Hash Link Navigation Within a Page

Don’t you just hate it when you seem to be the only one on the internet with a specific problem.

A couple of weeks ago I spent an hour, an entire bloody hour, trying to solve this problem, and the internet was not very helpful. I did eventually find a solution, but the core issure is such a common thing that I assumed it would be an easy problem to solve, but it turned out that it really wasn’t. Having tried about half a dozen different “solutions”, all accompanied on the forums I harvested them from with myriad comments of the ilk: “This worked for me” and “Awesome! Fixed my problem! Thanx!”. Needless to say they did not work for me, nor were they awesome and a fix for my problem.

So to the problem; Hash link navigation within an AngularJS web page, when HTML5 mode is set to “true”, without causing an inadvertent full page reload. Eventually, on a forum I can’t remember, some clever fellow offered the kernals of advice that finally resulted in a solution, and in case anyone else is having this issue (and also for my own personal archives when I encounter this problem again and can’t remember what I did the first time) here is the way to get it to work:

Within the AngularJS HTML View:

<a data-ng-click="ScrollTo('ele' + $index)">{{ anAngularJsDataItemHere }}</a>

Within the AngularJS JavaScript Controller, at the top where you define the Controller signature:

app.controller('ControllerName' , ['$scope', '$routeParams', '$location' , '$anchorScroll', function ($scope, $routeParams, $location, $anchorScroll)

Within the AngularJS JavaScript Controller, amongst your actual methods:

$scope.ScrollTo = function (prmElementToScrollTo)
	//Store the old location.hash
	var oldLocation = $location.hash();

	//Set the location.hash to the id of the chosen element and navigate to it

	//Change the location.hash back to the old one to prevent page reloading

There. Feels good to get that off my chest.

Back to Top