How to use ng-iscroll with ui-router?

[jonycus]

First of all great work guys!

We are using this module in combination with ui-router module. However, when one changes the navigation to the next state and the page height changes, since the content is injected the wrapper's height is not refreshed. Is there a way we can fix this?

Thanks in advance.

Vasko

[sebastianzillessen]

I'm having a connected issue when using ui-router with nested routes and multiple ng-iscroll directives! Should I do this, or not?

[jonycus]

I just managed to solve this. It is a work around and not intervention in the ng-iscroll module. What we did was attach a controller to the wrapper:

 <div id="wrapper" ng-iscroll ng-iscroll-delay='400' ng-controller="IndexController">

and in the controller we called the refresh function from iScroll on each state change. This is the same container that we are scrolling with iScroll.

 $scope.$on('$viewContentLoaded', function() {
         setTimeout(function() {
             $scope.$parent.myScroll['wrapper'].refresh();
             $scope.$parent.myScroll['wrapper'].scrollTo(0, 0, 200);
          }, 450);
     });

Be careful on the lookup of the myScroll variable. Depending on your structure it might have different path than mine above. You might have more parents or it just might be in the same $scope. Also, since the content is dynamically injected in the container iScroll remmebers the current position of the scroll, so when you navigate to the next page it will be scrolled to the previous state. The second line of the timeout function returns you to the top.

Hope this helps!

BR

[flatsteve]

@jonycus Thank you so very much! Solution works perfectly for me. Cheers.