Non riesco a capire perché caricamento della pagina, in fondo? Angolare UI-Router autoscroll Problema

Per la vita di me, non riesco a capire perché questa casa caricamento della pagina in basso. È questo un angolare di interfaccia utente del router, angolare, javascript o CSS problema? Sono stato bloccato per due ore e non sapendo il motivo della mia pagina html carichi in basso invece che in alto è davvero uccidere la mia autostima come programmatore :/

Qui è la home page: [ URL Redatto ]

AGGIORNAMENTO
Ho risolto questo problema. E ‘ stato con Angolare di interfaccia utente del Router. Vedi la mia risposta qui sotto per il semplice correzione.

Io uso Angolare Angolare e dell’interfaccia utente del Router e il set up simile a questo…

di default.giada

  doctype html
  html(lang='en', xmlns='http://www.w3.org/1999/xhtml', xmlns:fb='https://www.facebook.com/2008/fbml', itemscope='itemscope', itemtype='http://schema.org/Product')
  include ../includes/head
  body(ng-controller="RootController")
  block content
  include ../includes/foot

indice.giada

extends layouts/default

block content
  section.container
    div(ui-view="header")
    div(ui-view="content")
    div(ui-view="footer")

Angolare Config.js

window.app.config(function($stateProvider, $urlRouterProvider) {
//For any unmatched url, redirect to "/"
$urlRouterProvider.otherwise("/");
//Now set up the states
$stateProvider
    .state('home', {
      url: "/",
      views: {
        "header":    { templateUrl: "views/header/home.html"   },
        "content":   { templateUrl: "views/content/home.html"  },
        "footer":    { templateUrl: "views/footer/footer.html" }
      },
      resolve: { factory: setRoot }
    })
    .state('signin', {
      url: "/signin",
      views: {
        "header":    { templateUrl: "views/header/signin.html"   },
        "content":   { templateUrl: "views/content/signin.html"  },
        "footer":    { templateUrl: "views/footer/footer.html" }
      },
      resolve: { factory: setRoot }
    })
InformationsquelleAutor ac360 | 2014-02-11



4 Replies
  1. 41

    Angolare UI-Router recentemente aggiornato la sua app in modo che scorre automaticamente nuovi punti di vista caricato di default. Questa è stata la causa della mia app di caricare le pagine scorrono verso il basso. Per disattivare questa funzione semplicemente aggiungere il seguente attributo a ui-view:

    <div ui-view="header" autoscroll="true"></div>
    • Ho avuto il problema di OP descrive, e questo ha funzionato per me, ho dovuto aggiungere questo attributo in più di mio figlio.i fratelli[n] ui-view div.
    • Dal momento che questo distacco, ui-router ha modificato l’azione predefinita di autoscroll. Il autoscroll="false" impostazione ora mantiene la posizione di scorrimento quando si carica una nuova vista. Tuttavia autoscroll="true" caricare il top per la nuova vista.
    • Questa soluzione perfettamente funzionato per me. Ma quando uso il tasto back del browser per caricare la pagina precedente è anche lo scorrimento verso l’alto a causa della autoscroll=’true’ . Qual è la soluzione?
    • Ciao, per qualche ragione, questo lo scorrimento automatico non funziona per me. Ho una ui-view che carica un nidificati ui-view (3 viste: header, content e footer). Quando vado ad uno stato che consente di ricaricare il contenuto di visualizzare e scorrere fino a metà strada, quindi ricaricare il mio browser in modalità di scorrimento indietro alla posizione esatta. Ho provato di tutto fino a rendere un scrollTop direttiva, utilizzando il $uiViewScroll(elemento). Nulla funziona. Si tratta di una specie di guidare me folle adesso. Ho sempre voglia di iniziare dalla parte superiore dello schermo, ma non riesco a superare questa funzione di scorrimento automatico. Qualcuno ha una soluzione per me?
    • incredibile. Posso solo dire a me stesso: RTF. Non stavo utilizzando un’espressione di autoscroll. Ho usato autoscroll="false" invece di autoscroll=" 'false' ". Facile da trascurare. Forse qualcosa da prendere in codice? Convertire un’espressione se si tratta di un booleano
    • Funziona alla grande, grazie!
    • Per me, né autoscroll="true"autoscroll="false" compie ciò di cui ho bisogno. Cosa devo fare se voglio l’app di carico al top della finestra ogni volta (non il top di vista), indipendentemente da dove sono spostato in vista precedente?

  2. 10

    qui è una possibile soluzione, ho usato un workoround, in quanto lo scorrimento automatico non era lavoro per me, così ho costretto il mio punto di vista per scorrere verso l’alto. Spero che questo aiuta.

    app.run(['$window', '$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager',  '$timeout', function($window, $rootScope, $location, $cookieStore, $state,CacheManager, $timeout){
    
    
    $rootScope.$on('$viewContentLoaded', function(){
    
    var interval = setInterval(function(){
      if (document.readyState == "complete") {
          window.scrollTo(0, 0);
          clearInterval(interval);
      }
    },200);
    
    });
    
    
    
    }]);
    • Questo ha funzionato per me. Sono stato anche in grado di rimuovere semplicemente il seguito, che funziona bene e rimosso i 200ms ritardo… $rootScope.$on('$viewContentLoaded', function(){ window.scrollTo(0, 0); });
    • Una soluzione migliore è usare $anchorScroll() di finestra.scrollTo. Sto usando ancoraggio di scorrimento ora e funziona. “$rootScope.$on(“$viewContentLoaded”, function(){ $anchorScroll(); });”
    • “$rootScope.$on(“$viewContentLoaded”, function(){ $anchorScroll(); });” non funziona per me. Ma questo FUNZIONA: $rootScope.$on(‘$viewContentLoaded’, function(){ window.scrollTo(0, 0); }); Semplice ed efficace 🙂 Grazie per le soluzioni.
  3. 7

    in esecuzione di blocco di aggiungere:

    $rootScope.$on('$stateChangeSuccess', function () {
      $anchorScroll();
     });

    Naturalmente, è necessario inserire il $anchorScroll dipendenza

    • con interfaccia utente del router dovrebbe essere “stateChangeSuccess”, come “routeChangeSuccess” è per il ng-router immagino ?
  4. 0

    Mi sono imbattuto in questo problema un po ‘ di tempo fa. Quello che succede è che si sta a pagina 1, scorrere la pagina verso il basso immagino, quindi fare clic su un pulsante per andare alla pagina 2. Il router quindi non regolare la vostra posizione di scorrimento quando si va alla pagina successiva. Ho risolto da scorrimento al top su tutti i cambiamenti di percorso.

    • Aggiunta di un codice di esempio che mostra quello che hai fatto potrebbe migliorare la qualità di questa risposta
    • Ho modificato perché non aggiunge nulla alla risposta. Se non avete tempo per scrivere una risposta, forse si dovrebbe aver appena fatto un commento, invece?
    • Ho letto e capito come puro rumore, allo stesso modo in cui “ciao”, “grazie” e “speranza” che “aiuta”
    • Quella è una soluzione Mindstormy. Grazie per il tentativo di aiuto 🙂
    • potrebbe essere utile aggiungere il codice per la tua risposta, perché non sta dando alcuna soluzione.

Lascia un commento