Saya telah menemukan beberapa perilaku yang tidak diinginkan, setidaknya bagi saya, ketika rute berubah. Pada langkah 11 tutorial http://angular.github.io/angular-phonecat/step-11/app/#/phones Anda dapat melihat daftar ponsel. Jika Anda menggulir ke bawah dan mengklik salah satu yang terbaru, Anda dapat melihat bahwa gulir itu tidak di atas, malah agak di tengah.
Saya telah menemukan ini di salah satu aplikasi saya juga dan saya bertanya-tanya bagaimana saya bisa mendapatkan ini untuk menggulir ke atas. Saya bisa melakukannya secara manual, tetapi saya pikir harus ada cara elegan lain untuk melakukan ini yang saya tidak tahu.
Jadi, adakah cara yang elegan untuk menggulir ke atas ketika rute berubah?
sumber
<div class="ng-view" autoscroll></div>
dan berfungsi sama (kecuali jika Anda ingin membuat scrolling bersyarat).$window.scrollTo(0,0)
$ pendengar acara $ stateChangeSuccessMasukkan kode ini untuk dijalankan
sumber
$window.scrollTop(0,0)
bekerja lebih baik untuk saya daripada autoscroll. Dalam kasus saya, saya memiliki pandangan yang masuk dan keluar dengan transisi.Kode ini bekerja sangat baik untuk saya .. Saya harap ini juga akan bekerja dengan baik untuk Anda .. Yang harus Anda lakukan hanyalah menyuntikkan $ anchorScroll ke run run Anda dan menerapkan fungsi pendengar ke rootScope seperti yang telah saya lakukan dalam contoh di bawah ini ..
Berikut urutan pemanggilan Modul Angular:
app.config()
app.run()
directive's compile functions (if they are found in the dom)
app.controller()
directive's link functions (again, if found)
RUN BLOCK dijalankan setelah injector dibuat dan digunakan untuk memulai aplikasi .. itu berarti ketika Anda diarahkan ke tampilan rute baru, pendengar di blok run memanggil
dan sekarang Anda dapat melihat gulir mulai ke atas dengan tampilan perutean baru :)
sumber
Setelah satu atau dua jam mencoba setiap kombinasi
ui-view autoscroll=true
,$stateChangeStart
,$locationChangeStart
,$uiViewScrollProvider.useAnchorScroll()
,$provide('$uiViewScroll', ...)
, dan banyak lainnya, saya tidak bisa scroll-to-top-on-baru-halaman bekerja seperti yang diharapkan.Inilah yang akhirnya berhasil bagi saya. Ini menangkap pushState dan replaceState dan hanya memperbarui posisi gulir ketika halaman baru dinavigasi ke (tombol kembali / maju mempertahankan posisi gulir mereka):
sumber
$locationProvider.html5Mode(true);
@wkronkel apakah ada cara untuk mencapai ini ketika tidak menggunakan mode HTML5 di sudut? Karena pemuatan ulang halaman menyebabkan 404 kesalahan karena mode html 5 sedang aktif.run
ke mana? sudutapp
objek Anda ?run
fungsi adalah metode yang tersedia di setiap objek modul sudut.Inilah solusi saya (yang tampaknya) kuat, lengkap dan (cukup) ringkas. Ini menggunakan gaya kompatibel minification (dan akses angular.module (NAME) ke modul Anda).
PS Saya menemukan bahwa hal autoscroll tidak berpengaruh apakah disetel ke true atau false.
sumber
Menggunakan angularjs UI Router, yang saya lakukan adalah ini:
Dengan:
Itu tidak pernah gagal di halaman mana pun, dan itu bukan global.
sumber
onEnter: scrollContent
// Your favorite scroll method here
?$('html, body').animate({ scrollTop: -10000 }, 100);
onEnter: scrollContent
di setiap view, itu hanya bekerja pada view / rute pertama, bukan yang ke-2. Aneh.FYI untuk siapa pun yang menemukan masalah yang dijelaskan dalam judul (seperti yang saya lakukan) yang juga menggunakan plugin Router AngularUI ...
Seperti yang ditanyakan dan dijawab dalam pertanyaan SO ini, router angular-ui melompat ke bagian bawah halaman ketika Anda mengubah rute.
Tidak tahu mengapa halaman dimuat di bagian bawah? Masalah UI-Router otomatis sudut
Namun, seperti yang dinyatakan dalam jawabannya, Anda dapat mematikan perilaku ini dengan mengatakan
autoscroll="false"
pada Andaui-view
.Sebagai contoh:
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view
sumber
Anda dapat menggunakan javascript ini
sumber
$location.hash('top')
sebelum$anchorScroll()
tombol browser maju / kembali default tidak lagi berfungsi; mereka terus mengarahkan Anda ke hash di URLJika Anda menggunakan ui-router, Anda dapat menggunakan (saat dijalankan)
sumber
Saya menemukan solusi ini. Jika Anda pergi ke tampilan baru fungsi dijalankan.
sumber
Pengaturan autoScroll menjadi true bukan trik untuk saya, jadi saya memang memilih solusi lain. Saya membangun layanan yang menghubungkan setiap kali rute berubah dan yang menggunakan layanan $ anchorScroll bawaan untuk menggulir ke atas. Bekerja untuk saya :-).
Layanan:
Registrasi:
sumber
Sedikit terlambat ke pesta, tetapi saya sudah mencoba setiap metode yang mungkin, dan tidak ada yang berhasil. Inilah solusi elegan saya:
Saya menggunakan pengontrol yang mengatur semua halaman saya dengan ui-router. Ini memungkinkan saya untuk mengarahkan ulang pengguna yang tidak diautentikasi atau divalidasi ke lokasi yang sesuai. Kebanyakan orang meletakkan middleware mereka di konfigurasi aplikasi mereka, tetapi saya memerlukan beberapa permintaan http, oleh karena itu pengontrol global berfungsi lebih baik untuk saya.
Index.html saya terlihat seperti:
InitCtrl.js saya terlihat seperti:
Saya sudah mencoba setiap opsi yang mungkin, metode ini bekerja paling baik.
sumber
id="top-nav"
elemen yang benar itu penting.Semua jawaban di atas tidak sesuai dengan perilaku browser yang diharapkan. Apa yang diinginkan kebanyakan orang adalah sesuatu yang akan bergulir ke atas jika itu adalah halaman "baru", tetapi kembali ke posisi sebelumnya jika Anda sampai di sana melalui tombol Kembali (atau Maju).
Jika Anda mengasumsikan mode HTML5, ini ternyata mudah (walaupun saya yakin beberapa orang cerdas di luar sana dapat mengetahui cara membuatnya lebih elegan!):
Cara kerjanya adalah router menganggap akan menggulir ke atas, tetapi menunda sedikit untuk memberi browser kesempatan untuk menyelesaikan. Jika browser kemudian memberi tahu kami bahwa perubahan itu disebabkan oleh navigasi Kembali / Maju, itu membatalkan batas waktu, dan gulir tidak pernah terjadi.
Saya menggunakan
document
perintah mentah untuk menggulir karena saya ingin pindah ke seluruh bagian atas jendela. Jika Anda hanya inginui-view
menggulir, maka atur diautoscroll="my_var"
mana Anda mengontrolmy_var
menggunakan teknik di atas. Tetapi saya pikir sebagian besar orang akan ingin menggulirkan seluruh halaman jika Anda pergi ke halaman sebagai "baru".Di atas menggunakan ui-router, meskipun Anda bisa menggunakan ng-rute sebaliknya dengan menukar
$routeChangeSuccess
untuk$stateChangeSuccess
.sumber
var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) { $urlRouterProvider.otherwise('/home'); $locationProvider.html5Mode(false).hashPrefix(""); $stateProvider // HOME STATES AND NESTED VIEWS ======================================== .state('home', { url: '/home', templateUrl: 'partial-home.html' }) });
.state('web', { url: '/webdev', templateUrl: 'partial-web.html', controller: function($scope) { $scope.clients = ['client1', 'client2', 'client3']; // I put it here } })
Saya hanya belajar hal ini, mungkin saya kehilangan sesuatu: DTidak ada jawaban yang diberikan yang menyelesaikan masalah saya. Saya menggunakan animasi antara tampilan dan gulir akan selalu terjadi setelah animasi. Solusi yang saya temukan sehingga bergulir ke atas terjadi sebelum animasi adalah arahan berikut:
Saya memasukkannya pada tampilan saya sebagai berikut:
sumber
Solusi Sederhana, tambahkan
scrollPositionRestoration
modul rute utama yang diaktifkan.Seperti ini:
sumber
Coba ini http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /
Itu gulir ke bagian atas daftar scrollTop ()
sumber
Saya akhirnya mendapatkan apa yang saya butuhkan.
Saya perlu menggulir ke atas, tetapi ingin beberapa transisi tidak
Anda dapat mengontrol ini pada level rute-per-rute.
Saya menggabungkan solusi di atas dengan @wkonkel dan menambahkan yang sederhana
noScroll: true
parameter ke beberapa deklarasi rute. Lalu saya menangkapnya dalam transisi.Semua dalam semua: Ini melayang ke atas halaman pada transisi baru, itu tidak melayang ke atas pada
Forward
/Back
transisi, dan memungkinkan Anda untuk menimpa perilaku ini jika perlu.Kode: (solusi sebelumnya ditambah opsi noScroll tambahan)
Masukkan itu di
app.run
blok Anda dan suntikkan$state
...myApp.run(function($state){...})
Kemudian, Jika Anda tidak ingin menggulir ke bagian atas halaman, buat rute seperti ini:
sumber
Ini bekerja untuk saya termasuk autoscroll
<div class="ngView" autoscroll="true" >
sumber