Come "ricordare" la posizione di scorrimento in angularJS w/Ui.ROUTER

Question

Ho un progetto Sto usando angularJS con ui.router e abbiamo una lista di eventi che possono essere veramente lunghi (ha scroll infiniti) se un utente clic su un evento per visualizzare i dettagli viene visualizzato un pulsante indietro, tuttavia, facendo nuovamente clic sul rotolo dei ripristini div in cima! Alla ricerca di qualche suggerimento se c'è qualcosa di costruito in cui potrei fare leva per ricordare questa posizione di scorrimento, so che c'è il servizio di ancoraggio, ma mi chiedo se non ci sia qualcosa di più adatto a fermare l'angolazione dal resettare le posizioni di scorrimento sulla navigazione ?? poiché ci sono alcuni elenchi simili a questo che hanno bisogno di ricordare il loro stato quando si scorre. Ho esaminato e provato a implementare ui-router-extras dsr e sticky ma nessuno dei due sta funzionando ..
esempio http://codedef.com/hapzis_poc/. non è una prova completa, ma dovrebbe essere in grado di scorrere verso il basso gli eventi, fare clic su e indietro e rimanere nella stessa posizione di scorrimento.

Answer 1

Affinché gli stati appiccicosi funzionino, è necessario che non distruggano l'elemento DOM. Osservando la struttura dello stato, si utilizza la vista ui con nome body per lo stato home, secondo la documentazione di ui-router-extras. Tuttavia, in seguito si verifica un clobber di tale elemento di visualizzazione ui durante la transizione allo stato about, che utilizza anche la vista ui body. Questo può essere osservato ispezionando il 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' 
      } 
     } 
    }); 

---

Assicurarsi ui vista dello stato appiccicoso non viene riutilizzato. Per il tuo esempio, inserisci lo stato about nella visualizzazione senza nome.

.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 }); 

Answer 2

C'è una conversazione sul soggetti simili (ng-view) e la risposta data dal @ BR2000 ha lavorato per me.

https://stackoverflow.com/a/25073496/3959662

per fare il suo lavoro di direttiva per ui-router effettuare le seguenti operazioni:

1. Creare nuova direttiva in questo modo:

(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's 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. usarlo su l'elemento avere l'attributo ui-view, nel mio caso:

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