$location.path change hash to %23 & .hash is not working fine - angularjs

Question

I want to redirect to the another page & focus should be on the some DIV with id let's say 'some-div-id'.
I tried following
$location.path('/' + $scope.config_path.school + '/' +
$routeParams.someUrl + '/#some-div-id')
This is working fine but it first change # to %23
Like
/%23some-div-id #If '#' is not already present in the URL
/%23some-div-id#some-div-id #If '#' is laready present in the URL
/#some-div-id
I also tried following
$location.path('/' + $scope.config_path.school + '/' +
$routeParams.someUrl + '/').hash('some-div-id')
it is creating a proper URL but not scroll down to the DIV with id some-div-id
EDITED
app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
setTimeout(function() {
if ($location.hash()) {
$anchorScroll($location.hash());
}
});
});
})
app.controller('MainCntrl', function($scope, $location, $anchorScroll, $routeParams) {
});
Also i tried $location.path & $location.url

Answer 1

Try using $location.url instead of $location.path .
As per the documentation , $location.path only changes the path whereas $location.url changes the path, search and hash.
So the code would be like
$scope.goto = function() {
$location.url('pageone#one');
};
Where pageone is URL of the state and #one is the ID
Also to make it work when directly visiting the URL with the ID in it , use $anchorScroll . On the $stateChangeSuccess event , checking weather $location.hash is present or not.If present , then call $anchorScroll . The code would look like
.run(function($rootScope, $location, $anchorScroll,$timeout) {
$rootScope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams) {
$timeout(function() {
if ($location.hash()) {
$anchorScroll();
}
});
});
})
Example - http://plnkr.co/edit/4kJjiMJImNzwLjRriiVR?p=preview ( For seeing change in URL check http://run.plnkr.co/plunks/4kJjiMJImNzwLjRriiVR/#/pageone )

Answer 2

This behavior is expected. Angular will not allow a second # in your url by default, thus every # beyond the first one will be escaped, resulting in %23 which is the escape character for #: http://www.w3schools.com/tags/ref_urlencode.asp.
You could try enabling html5mode by adding the following to your .config block:
$locationProvider.html5Mode({
enabled: true
});
If that doesn't solve your problem, or if you need to support support IE8, your best bet would probably be to use $anchorScroll().
Here's the documentation.
In your app, you could pass the id of the div you want to scroll to as a parameter in your url (using $routeParams or ui-router's $stateParams), and then call a function that will scroll to that div immediately on page load, such as:
$scope.scrollTo = function(id) {
$location.hash(id);
$anchorScroll();
}
Please also read the following for a more detailed explanation on how to use $anchorScroll() for your specific problem:
How to handle anchor hash linking in AngularJS
Namely, this particular section:
Set up your angular routing as usual, then just add the following code.
app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
//when the route is changed scroll to the proper element.
$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
$location.hash($routeParams.scrollTo);
$anchorScroll();
});
});
and your link would look like this:
Test/Foo

Answer 3

$location.path(page);
just add the dependency in ur controller by add $location,
This method redirects you on this route, without any error.

Answer 4

In ng-book, there is something about %13 signs replacing normal letter.
Unfortunately, it's about different topic - it is about an $http or xhr api call through REST, where there are two modes ( same would be here ) - one normal mode and second JQuery like. It turned out that jquery adds these %13 signs to things like arr[]=1.
Why i am saying this?
Because after solution comes libraries and functions which support marginal conditions.
The situation in Your question is quite simple. There is $location service, which is solution and urls are created simillary in two modes, which are hashbang and not hashbang.
In problem with jquery parameters, developers provided library for exchanging jquery parameters to normal. There are many converters in real life, like pdf to doc etc.
Please look at short chapter in this book.
It is stated that in html5 mode, you cannot have two hashes in url, but in hashbang mode you can.
Browser cannot know which hash is to go to in hashbang mode. The support for this is anchorScroll service.
I haven't checked if this works in this case but try to configure your app with AnchorScrollProvider:
.config(function($anchorScrollProvider){
$anchorScrollProvider.disableAutoScrolling();
});
Then as i written, you can inject $anchorService service to any place in your app ( especially in controller binded to view containing some-div-id div ) And call anchorScroll() function of this service at any chosen time.
I cannot test it right now so this is theoretical answer.

Answer 5

I had the same problem before and this post helped me out.
Let's hope it is going to help you aswell, if it doesn't let me know so I can help you find another solution.
Good luck.