How do I make templateURL scroll into certain part of a page?

Question

Can you guys help me with my routeProvider?

$routeProvider.when('/farm', {
        templateUrl: '/index.htm#farm'
    });

#farm doesn't work. I wanted it so that when somebody clicks the Farm link from outlook, it would go to the index page and scroll down to where there is an id of farm. My div already has an ID of farm too so no problem with that I guess.

I've read a lot of sources and solutions but all of them say that anchor tags doesn't work on templateURL. I was wondering if you guys got a work around for this.

By the way, sample link is: www.test.com/index#farm Clicking on that link in outlook email won't scroll down to where #farm is. Instead, it goes to the index page and turns the URL into only /index without the #farm

Here is another part of my code in case maybe these guys are messing with it:

$locationProvider.hashPrefix('');

    $routeProvider.when('/index', {
        templateUrl: '/index.htm'
    });
    $routeProvider.when('/farm', {
        templateUrl: '/index.htm#farm'
    });
    $routeProvider.when('/error', {
        templateUrl: '/error.htm'
    });
    $routeProvider.otherwise({ redirectTo: '/index' });

I think that the .otherwise is making it go to index.htm. Is there any other way to just add another routeProvider and templateURL that may scroll down to where farm is in the index page?

When I tried templateURL: '/index.html#farm' it only went to /index%23farm which doesn't scroll down.

So basically the link is external (from email) and if they click it I want them to scroll down to where #farm is.

Answer 1

Use $anchorScroll();

Inject $anchorScroll into your controller and use it as such.

https://docs.angularjs.org/api/ng/service/$anchorScroll

 // the element you wish to scroll to.
  $location.hash('farm’);

  // call $anchorScroll()
  $anchorScroll();