How to "remember" the scroll position in angularJS w / Ui.ROUTER

Question

I have a project in which I use angularJS with ui.router, and we have a list of events that can be very long (has endless scrolling) if the user clicks on the event to view the details. clicking backward scrolling div resets backwards! Looking for some suggestions as to whether there is anything that I could use to remember this scroll position, I know that this is an anchorscroll service, but I am wondering if there is anything more suitable for stopping angular from reselling scroll positions for navigation? since there are several similar lists that you need to remember their state when scrolling. I looked and tried to implement ui-router-extras dsr and sticky, but none of them work ..
example http://codedef.com/hapzis_poc/ . not complete proof, but should be able to scroll down events, click and return and stay in the same scroll position.

Answer 1

There is a conversation on a similar topic ( ng-view ), and the answer given by @ br2000 worked for me.

fooobar.com/questions/117059 / ...

To do your directory work for ui-router , follow these steps:

1. Create a new directive as follows:

 (function () { 'use strict'; angular .module('your.module.directives') .directive('keepScrollPos', keepScrollPos); function keepScrollPos($route, $window, $timeout, $location, $anchorScroll, $state) { // cache scroll position of each route templateUrl var scrollPosCache = {}; // compile function var directive = function (scope, element, attrs) { scope.$on('$stateChangeStart', function () { // store scroll position for the current view if($state.$current) { scrollPosCache[$state.current.templateUrl] = [$window.pageXOffset, $window.pageYOffset]; } }); scope.$on('$stateChangeSuccess', function () { // if hash is specified explicitly, it trumps previously stored scroll position if ($location.hash()) { $anchorScroll(); // else get previous scroll position; if none, scroll to the top of the page } else { var prevScrollPos = scrollPosCache[$state.current.templateUrl] || [0, 0]; $timeout(function () { $window.scrollTo(prevScrollPos[0], prevScrollPos[1]); }, 0); } }); }; return directive; } })(); 

2. Use it for an element that has a ui-view attribute, in my case:

 <div class="col-xs-12" ui-view keep-scroll-pos></div> 

Answer 2

To work with sticky states, you do not have to destroy the DOM element. If you look at your state structure, you use the named ui-view body for the home state, according to the ui-router-extras documentation. However, you then clobber this ui-view element when you transition to the about state, which also uses the body ui-view. This can be observed by checking the DOM.

 .state('home', { url: "", deepStateRedirect: true, sticky: true, views: { "body": { templateUrl: 'templates/home.html' }, " event_list@home ": { sticky: true, templateUrl: "templates/eventList.html", controller: "eventListCtrl" } } }) .state('about', { url: 'about', views: { "body": { // BAD, you just clobbered the sticky ui-view with this template templateUrl: 'templates/about.html' } } }); 

---

Ensure that the ui-sticky state is not reused. For your example, put about status in an unnamed representation.

  .state('about', { url: 'about', templateUrl: 'templates/about.html' }); 

index.html

 <div ui-view="body" ng-show="$state.includes('home')"></div> <div ui-view></div> 

JS:

 app.run(function($rootScope, $state) { $rootScope.$state = $state } );