0

Angular version : latest --1.2

I am loading views into ng-view based on $routeprovider, I am in the middle of developing an application, so right now I am just giving the URL in the browser and its corresponding VIEW is loaded.

Problem is I have links in partial pages, which should scroll me to particular div and the links are generated using ng-repeat.

Code:

<li ng-repeat = "(key,val) in test.Questions">      
    <a href="#{{key}}" >{{ $index+1}}</a>        
</li>

So when I click on the above generated links, the URL is replaced with link.

Eaxmple: 

http://localhost:8085/Questionarie/#/exam/533135

is the URL to load VIEW, but its replaced like this: 

http://localhost:8085/Questionarie/#QS7.....

instead I want something like this

http://localhost:8085/Questionarie/#/exam/533135#QS7

NOTE: I tried using $anchorscroll, but its working only if I give string literal in scrollTO('foo')..., if I give like scrollTo({{foo}}).. its not working

Right now I am not using any back end, just developing the UI in localhost. I saw some info on HTML5 mode, but could not understand how to use.

Also I am planning to use NodeJS and express in future.

CONCLUSION So the problem is inner page links conflicting with angularJS routing, not only the case I mentioned above, but while using Twitter Bootstrap tabs also the URL is replaced.

Arulkumar
  • 12,966
  • 14
  • 47
  • 68
Chetan Sandeep Renu
  • 173
  • 4
  • 10

1 Answers1

0

Not sure if this applies to ngRouter, but I would highly suggest switching over to ui-router which supports nested views, to name one of a couple of benefits.

Step 1: Unregister the $anchorScroll service.

angular.module('myapp', [...]).value('$anchorScroll', angular.noop)...

Step 2: Setup listeners on $viewContentLoaded. 

myapp.run(['$state', '$stateParams', '$window', function ($state, $stateParams, $window) {
  $rootScope.$on('$viewContentLoaded', function () {
    var state = $state.$current;
    if (state.scrollTo == undefined) {
      $window.scrollTo(0, 0);
    } else {
      var to = 0;
      if (state.scrollTo.id != undefined) {
        to = $(state.scrollTo.id).offset().top;
      }
      if ($($window).scrollTop() == to) {
        return;
      }
      if (state.scrollTo.animated) {
        $(document.body).animate({scrollTop:to});
      } else {
        $window.scrollTo(0, to);
      }
    }
  });
}]);

Step 3: Setup your state(s)

state('applications.details', {         
  ...
  scrollTo    : { id:'#applications-content-anchor', animated: true }
}).

Courtesy of gaelduplessix on GitHub.

https://github.com/angular-ui/ui-router/issues/110

Note: I have not tested this myself personally, but the general response in the issue thread was positive enough for me to chuck this your way - hopefully it'll all work out.

Good luck.