$ location.path changes the hash to% 23 and .hash is not working fine

Question

I want to redirect to another page, and the focus should be on some DIV with id let say 'some-div-id'. I tried to follow

 $location.path('/' + $scope.config_path.school + '/' + $routeParams.someUrl + '/#some-div-id') 

This works fine, but first changes # to% 23 How

 /%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 to follow

 $location.path('/' + $scope.config_path.school + '/' + $routeParams.someUrl + '/').hash('some-div-id') 

it creates the correct url but doesn't 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) { }); 

I also tried $location.path and $location.url

Answer 1

Try using $location.url instead of $location.path .

According to the documentation, $location.path only changes the path, while $location.url changes the path, search, and hash.

So the code will look like

 $scope.goto = function() { $location.url('pageone#one'); }; 

Where pageone is the status URL and #one is the identifier

Also, to make it work when directly visiting a URL with an identifier in it, use $anchorScroll . In the $stateChangeSuccess event, there is a weather check of $location.hash or not. If present, call $anchorScroll . The code will look like

 .run(function($rootScope, $location, $anchorScroll,$timeout) { $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) { $timeout(function() { if ($location.hash()) { $anchorScroll(); } }); }); }) 

An example is http://plnkr.co/edit/4kJjiMJImNzwLjRriiVR?p=preview (to view changes to the URL http://run.plnkr.co/plunks/4kJjiMJImNzwLjRriiVR/#/pageone )

Answer 2

This behavior is expected. Angular will not allow the second # in your URL by default, so each # outside the first will be escaped, resulting in %23 , which is the escape character for # : http://www.w3schools.com/tags/ref_urlencode. asp .

You can try to enable html5mode by adding the following to the .config block:

 $locationProvider.html5Mode({ enabled: true }); 

If this does not solve your problem or you need to support IE8 support, the best option would probably be to use $anchorScroll() .

Here is the documentation .

In your application, you can pass the id div that you want to scroll as a parameter in your URL (using $routeParams or ui-router $stateParams ), and then call a function that will scroll to that div right away when the page loads, for example :

 $scope.scrollTo = function(id) { $location.hash(id); $anchorScroll(); } 

Please also read a more detailed explanation of how to use $anchorScroll() for your specific problem:

How to handle binding binding bindings in AngularJS

Namely, this particular section:

Set up your Angular routing as usual, and 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 will look like this:

 <a href="#/test?scrollTo=foo">Test/Foo</a> 

Answer 3

$ location.path (page);

just add the dependency in ur controller by adding $ location. This method redirects you to this route without any errors.

Answer 4

There is something about the %13 characters in the ng book that replace the regular letter. Unfortunately, we are talking about a different topic - we are talking about calling $ http or xhr api via REST, where there are two modes (the same would be here) - one normal mode and the second JQuery. It turned out that jquery adds these %13 characters to things like arr[]=1 .

Why am I saying this? Because after the solution comes libraries and functions that support the limit conditions.

The situation in your question is quite simple. There is a $ location service, which is a solution, and URLs are created using simillary in two modes, which are hashbang, not hashbang.

In a task with jquery parameters, developers provided a library for exchanging standard jquery parameters. In real life, there are many converters, such as pdf to doc, etc.

Look at the short chapter in the book .

It is argued that in html5 mode you cannot have two hashes in the url, but in hash bang mode you can. The browser cannot know which hash should go into hashbang mode. Support for this is the anchorScroll service.

I did not check if this works in this case, but try to configure your application using AnchorScrollProvider :

 .config(function($anchorScrollProvider){ $anchorScrollProvider.disableAutoScrolling(); }); 

Then, when I write, you can add the $anchorService service $anchorService in your application (especially in the controller bound to the view containing some-div-id div) and call the anchorScroll() function of this service at any selected time.

I can’t check it right now, so this is a theoretical answer.

Answer 5

I had the same problem before and this post helped me. Let her hope that this helps you if it does not let me know, so I can help you find another solution.

Good luck.