Bagaimana untuk membuat pautan sauh berfungsi dengan lancar dengan penghalaan AngularJS?

Menavigasi Anchor Seamiessly dalam AngularJS

Latar Belakang:

Menavigasi pautan cincang anchor boleh menjadi rumit dalam AngularJS kerana lalainya mekanisme penghalaan. Isu ini timbul apabila mengklik pada pautan sauh menghasilkan penghalaan AngularJS ke halaman lain dan bukannya menatal dengan lancar ke elemen yang dimaksudkan dalam halaman sedia ada.

Penyelesaian: Menggunakan $anchorScroll()

Untuk menyelesaikan masalah ini, AngularJS menyediakan perkhidmatan $anchorScroll() yang tidak ternilai. Perkhidmatan ini membolehkan pembangun menatal secara manual ke elemen tertentu berdasarkan atribut ID mereka. Dengan memanfaatkan keupayaan ini, anda boleh mengawal kelakuan menatal pautan sauh dan menavigasi dalam halaman yang sama dengan mudah.

Pelaksanaan dalam Pengawal:

Untuk menggunakan $anchorScroll() , masukkannya ke dalam pengawal anda dan tentukan fungsi yang mengambil ID elemen yang diingini sebagai hujah. Dalam fungsi ini, kemas kini $location.hash() untuk memadankan ID elemen sasaran dan kemudian gunakan $anchorScroll().

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

Penggunaan:

Place pautan sauh dalam penanda HTML anda dan ikatkannya pada fungsi scrollTo(). Apabila diklik, pautan ini akan menatal ke elemen yang sepadan pada halaman.

<a ng-click="scrollTo('foo')">Foo</a>
<div id="foo">Here you are</div>

Menyepadukan dengan Penghalaan Sudut:

Untuk menjadikan penyelesaian ini berfungsi bersama-sama dengan Sudut penghalaan, tambah kod berikut pada blok larian anda. Kod ini mendengar perubahan laluan dan, apabila perubahan berjaya, tatal ke elemen yang ditentukan oleh parameter tatalKe dalam URL.

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});

Pendekatan Ringkas:

Untuk penyelesaian yang lebih mudah, anda boleh mengubah suai blok larian untuk mengendalikan semua perubahan cincang. Ini akan menatal ke mana-mana elemen dengan ID yang sepadan dengan nilai cincang.

app.run(function($rootScope, $location, $anchorScroll) {
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});

Atas ialah kandungan terperinci Bagaimana untuk membuat pautan sauh berfungsi dengan lancar dengan penghalaan AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!