Rotayı değiştirmek yeni sayfada en üste gitmiyor

En azından benim için rota değiştiğinde bazı istenmeyen davranışlar buldum. Öğreticinin 11. adımında http://angular.github.io/angular-phonecat/step-11/app/#/phones telefonların listesini görebilirsiniz. En alta kaydırır ve en sonunculardan birine tıklarsanız, kaydırmanın en üstte olmadığını, ortada bir çeşit olduğunu görebilirsiniz.

Bunu uygulamalarımdan birinde de buldum ve üste kaydırmak için bunu nasıl elde edebileceğimi merak ediyordum. Bunu tek başına yapabilirim, ama bunu bilmem için başka zarif bir yol olması gerektiğini düşünüyorum.

Peki, rota değiştiğinde en üste kaydırmanın zarif bir yolu var mı?

Sorun, ngView'ınızın yeni bir görünüm yüklediğinde kaydırma konumunu korumasıdır . $anchorScroll"Görünüm güncellendikten sonra görünüm penceresini kaydır" talimatını verebilirsiniz ( dokümanlar biraz belirsizdir, ancak buraya kaydırmak yeni görünümün en üstüne kaydırmak anlamına gelir ).

Çözüm , autoscroll="true"ngView öğenize eklemektir:

<div class="ng-view" autoscroll="true"></div>

Sadece bu kodu çalıştır

$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {

    window.scrollTo(0, 0);

});

Bu kod benim için harika çalıştı .. Umarım sizin için de harika çalışır .. Tek yapmanız gereken $ anchorScroll komutunu çalıştırmak ve aşağıdaki örnekte yaptığım gibi rootScope'a dinleyici işlevi uygulamak ..

 angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
    $rootScope.$on("$locationChangeSuccess", function(){
        $anchorScroll();
    });

İşte Angularjs Modülünün arama sırası:

1. app.config()
2. app.run()
3. directive's compile functions (if they are found in the dom)
4. app.controller()
5. directive's link functions (again, if found)

Enjektör oluşturulduktan sonra RUN BLOCK çalıştırılır ve uygulamayı başlatmak için kullanılır .. yeni rota görünümüne yönlendirdiğinizde, run bloğundaki dinleyici

$ AnchorScroll ()

ve şimdi yeni yönlendirilmiş görünümle kaydırma başlangıcında başlıyor görebilirsiniz :)

Her birleşimini çalışmakla bir iki saat sonra ui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(), $provide('$uiViewScroll', ...)beklendiği gibi, ve diğerleri, ben kaydırma-to-top-on-yeni-sayfa çalışmalarına alamadım.

Sonuçta benim için işe yarayan buydu. PushState ve replaceState'i yakalar ve yalnızca yeni sayfalara yönlendirildiğinde kaydırma konumunu günceller (geri / ileri düğmesi kaydırma konumlarını korur):

.run(function($anchorScroll, $window) {
  // hack to scroll to top when navigating to new URLS but not back/forward
  var wrap = function(method) {
    var orig = $window.window.history[method];
    $window.window.history[method] = function() {
      var retval = orig.apply(this, Array.prototype.slice.call(arguments));
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');
})

İşte (görünüşte) sağlam, eksiksiz ve (oldukça) özlü çözümüm. Minimasyon uyumlu stili (ve modülünüze angular.module (NAME) erişimini) kullanır.

angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
    $rootScope.$on("$locationChangeSuccess", function() {
                $anchorScroll();
    });
}]);

PS: Otomatik kaydırma işleminin doğru veya yanlış olarak ayarlanmış herhangi bir etkisi olmadığını buldum.

Angularjs UI Router kullanarak, yaptığım bu:

    .state('myState', {
        url: '/myState',
        templateUrl: 'app/views/myState.html',
        onEnter: scrollContent
    })

İle:

var scrollContent = function() {
    // Your favorite scroll method here
};

Hiçbir sayfada başarısız olmaz ve global değildir.

AngularUI Router'ı da kullanan başlıkta açıklanan problemle karşılaşan herkes için FYI eklentisini ...

Bu SO sorusunda sorulduğu ve yanıtlandığı gibi, rotaları değiştirdiğinizde açısal-ui yönlendirici sayfanın altına atlar.
Sayfanın neden altta yüklendiğini bulamıyor musunuz? Açısal UI-Router otomatik kaydırma Sorunu

Cevap devletler olarak Ancak, diyerek bu davranışı kapatabilirsiniz autoscroll="false"Aşağıdaki yerlerde de ui-view.

Örneğin:

<div ui-view="pagecontent" autoscroll="false"></div>
<div ui-view="sidebar" autoscroll="false"></div> 

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view

bu javascript'i kullanabilirsiniz

$anchorScroll()

Ui-yönlendirici kullanıyorsanız (çalışma sırasında) kullanabilirsiniz

$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
    $window.scrollTo(0, 0);
});

Bu çözümü buldum. Yeni bir görünüme giderseniz işlev yürütülür.

var app = angular.module('hoofdModule', ['ngRoute']);

    app.controller('indexController', function ($scope, $window) {
        $scope.$on('$viewContentLoaded', function () {
            $window.scrollTo(0, 0);
        });
    });

AutoScroll öğesini true olarak ayarlamak benim için hile yapmadı, bu yüzden başka bir çözüm seçtim. Rotanın değiştiği her seferinde çengel olan ve en üste kaydırmak için yerleşik $ anchorScroll hizmetini kullanan bir hizmet oluşturdum. Benim için çalışıyor :-).

Hizmet:

 (function() {
    "use strict";

    angular
        .module("mymodule")
        .factory("pageSwitch", pageSwitch);

    pageSwitch.$inject = ["$rootScope", "$anchorScroll"];

    function pageSwitch($rootScope, $anchorScroll) {
        var registerListener = _.once(function() {
            $rootScope.$on("$locationChangeSuccess", scrollToTop);
        });

        return {
            registerListener: registerListener
        };

        function scrollToTop() {
            $anchorScroll();
        }
    }
}());

Kayıt:

angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
    pageSwitch.registerListener();
}]);

Partiye biraz geç kaldım, ama olası her yöntemi denedim ve hiçbir şey düzgün çalışmadı. İşte benim zarif çözümüm:

Tüm sayfalarımı ui-yönlendirici ile yöneten bir denetleyici kullanıyorum. Kimliği doğrulanmayan veya doğrulanmayan kullanıcıları uygun bir konuma yönlendirmeme olanak tanır. Çoğu insan ara katmanlarını uygulamalarının yapılandırmasına koydu, ancak bazı http isteklerine ihtiyacım vardı, bu nedenle genel bir denetleyici benim için daha iyi çalışıyor.

Benim index.html şöyle görünür:

<main ng-controller="InitCtrl">
    <nav id="top-nav"></nav>
    <div ui-view></div>
</main>

Benim initCtrl.js şöyle görünüyor:

angular.module('MyApp').controller('InitCtrl', function($rootScope, $timeout, $anchorScroll) {
    $rootScope.$on('$locationChangeStart', function(event, next, current){
        // middleware
    });
    $rootScope.$on("$locationChangeSuccess", function(){
        $timeout(function() {
            $anchorScroll('top-nav');
       });
    });
});

Olası her seçeneği denedim, bu yöntem en iyi sonucu veriyor.

Yukarıdaki yanıtların tümü beklenen tarayıcı davranışını kırıyor. Çoğu insanın istediği şey, "yeni" bir sayfa ise en üste kaydırılacak, ancak Geri (veya İleri) düğmesinden geçiyorsanız önceki konuma geri dönecek bir şeydir.

HTML5 modunu varsayarsanız, bu kolay olur (ancak bazı parlak insanlar bunu nasıl daha zarif hale getirebileceğinden emin olabilirim!):

// Called when browser back/forward used
window.onpopstate = function() { 
    $timeout.cancel(doc_scrolling); 
};

// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
    doc_scrolling = $timeout( scroll_top, 50 );

// Moves entire browser window to top
scroll_top = function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}

Çalışma şekli, yönlendiricinin en üste kaydırılacağını varsayar, ancak tarayıcıya bitirme şansı vermek için biraz geciktirir. Tarayıcı daha sonra değişikliğin Geri / İleri gezinme nedeniyle olduğunu bildirirse, zaman aşımını iptal eder ve kaydırma hiçbir zaman gerçekleşmez.

documentKaydırma yapmak için ham komutları kullandım çünkü pencerenin en üstüne gitmek istiyorum. Sadece ui-viewkaydırmak istiyorsanız, yukarıdaki teknikleri kullanarak autoscroll="my_var"nerede kontrol edeceğinizi ayarlayın my_var. Ancak, sayfaya "yeni" olarak gidiyorsanız, çoğu insan tüm sayfayı kaydırmak isteyeceğini düşünüyorum.

Yukarıdaki kullanımların ui-yönlendirici, size rağmen yerine değiştirerek ng-rota kullanabilirsiniz $routeChangeSuccessiçin $stateChangeSuccess.

Verilen cevapların hiçbiri sorunumu çözmedi. Görünümler arasında bir animasyon kullanıyorum ve kaydırma her zaman animasyondan sonra gerçekleşecekti. Animasyondan önce en üste kaydırmanın aşağıdaki yönerge olması için bulduğum çözüm:

yourModule.directive('scrollToTopBeforeAnimation', ['$animate', function ($animate) {
    return {
        restrict: 'A',
        link: function ($scope, element) {
            $animate.on('enter', element, function (element, phase) {

                if (phase === 'start') {

                    window.scrollTo(0, 0);
                }

            })
        }
    };
}]);

Benim görüşüme aşağıdaki gibi ekledim:

<div scroll-to-top-before-animation>
    <div ng-view class="view-animation"></div>
</div>

Basit Çözüm, scrollPositionRestorationetkinleştirilmiş ana rota modülüne ekleyin .
Bunun gibi:

const routes: Routes = [

 {
   path: 'registration',
   loadChildren: () => RegistrationModule
},
];

 @NgModule({
  imports: [
   RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
  ],
 exports: [
 RouterModule
 ]
 })
  export class AppRoutingModule { }

Bunu http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

Listenin en üstüne kaydırın scrollTop ()

Sonunda ihtiyacım olanı aldım.

Yukarı kaydırmak zorunda kaldım, ancak bazı geçişlerin

Bunu rota-rota düzeyinde kontrol edebilirsiniz.
@Wkonkel tarafından yukarıdaki çözümü birleştiriyorum ve basit birnoScroll: true bazı rota bildirimlerine parametre . Sonra bunu geçişte yakalıyorum.

Sonuçta: Bu, yeni geçişlerde sayfanın üst kısmına yüzer, üstteki geçişlere Forward/ Backgeçişlere sığmaz ve gerekirse bu davranışı geçersiz kılmanıza olanak tanır.

Kod: (önceki çözüm artı ekstra noScroll seçeneği)

  // hack to scroll to top when navigating to new URLS but not back/forward
  let wrap = function(method) {
    let orig = $window.window.history[method];
    $window.window.history[method] = function() {
      let retval = orig.apply(this, Array.prototype.slice.call(arguments));
      if($state.current && $state.current.noScroll) {
        return retval;
      }
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');

Bunu app.runbloğuna koy ve enjekte et $state...myApp.run(function($state){...})

Ardından, sayfanın en üstüne kaydırmak istemiyorsanız, aşağıdaki gibi bir rota oluşturun:

.state('someState', {
  parent: 'someParent',
  url: 'someUrl',
  noScroll : true // Notice this parameter here!
})

Bu otomatik kaydırma dahil benim için çalıştı

<div class="ngView" autoscroll="true" >