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

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:

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

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.