here is my Demo
app.run(function($rootScope, $location, $anchorScroll) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
console.log("called routeChangeSuccess");
if ($location.hash()) $anchorScroll();
});
});
- Click on go to end of one it will navigate to the div with the id
- Second time click on the same link it wont do anything
What i am doing wrong? or is this something to do with angular ?
Note: hack for this would be to use click event and this should work am looking for direct solutions
using angular and route version 1.5.5
*added Bounty
I checked your plunkr, I noticed that you were not specifying the route, when giving the anchor tag, thus the '$routeChangeSuccess' isn't triggered, when I change the particular line to this
<a href="/one/#one"> go to end of one </a>
I anchor scroll works properly.
Solution: Plunkr
Please note the challenges of HTML5 mode in routing, here, if you have not already taken this into account.
You basically need to trigger the anchorscroll() on locationchange . For this you don't need to check for the $routeChangeSuccess . you can directly use the $locationChangeStart
$rootScope.$on('$locationChangeStart', function(event) {
$anchorScroll();
});
In order to work with both $routeChangeSuccess or $locationChangeStart you need to specify the routename to the anchor tag as follows
<a href="/one/#one"> go to end of one </a>
Updated Plunkr
try this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<base href="/"/>
</head>
<body ng-app="myApp">
<a ng-click="goTo('#one')" > go to end of one </a>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<div id="one">
This is one.
</div>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.run(function($rootScope, $location, $anchorScroll) {
//when the route is changed scroll to the proper element.
// $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
// console.log("called routeChangeSuccess");
// if ($location.hash()) $anchorScroll();
// });
$rootScope.goTo = function(value){
$location.hash(value);
};
});
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "/one.html"
})
.when("/one", {
templateUrl: "/one.html"
});
$locationProvider.html5Mode(true).hashPrefix('!');
});
</script>
</body>
</html>
Hope this helps.
