Bagaimana untuk Mengendalikan Anchor Hash Linking dalam Aplikasi AngularJS?

Pengendalian Anchor Hash dalam AngularJS

Menavigasi halaman web menggunakan sauh telah menjadi amalan biasa, terutamanya untuk halaman panjang dengan berbilang bahagian. Walau bagaimanapun, dalam aplikasi AngularJS, pengendalian pautan sauh boleh menjadi masalah.

Apabila mengklik pada pautan sauh dalam AngularJS, tingkah laku lalai adalah untuk memintas klik dan mengubah hala pengguna ke halaman lain. Untuk menangani isu ini, AngularJS menyediakan penyelesaian.

$anchorScroll()

Perkhidmatan $anchorScroll() dalam AngularJS direka khusus untuk mengendalikan pemautan cincang anchor. Perkhidmatan ini membolehkan anda menatal ke elemen pada halaman semasa berdasarkan nilai cincang dalam URL.

Untuk menggunakan $anchorScroll(), hanya masukkannya ke dalam pengawal anda dan panggilnya apabila perlu. Perkhidmatan mengambil parameter id pilihan yang menentukan elemen untuk menatal ke. Jika tiada id diberikan, ia akan menatal ke elemen dengan ID yang sepadan dengan $location.hash().

<code class="javascript">app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

<a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div></code>

Penghalaan dengan $anchorScroll()

Dalam aplikasi penghalaan AngularJS, menggunakan $anchorScroll() memerlukan pendekatan yang sedikit berbeza. Secara lalai, AngularJS menatal ke bahagian atas halaman apabila laluan berubah. Untuk mengelakkan ini dan mendayakan penatalan pautan sauh, anda boleh menambah kod berikut:

<code class="javascript">app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});</code>

Pautan sauh anda akan kelihatan seperti ini:

<code class="html"><a href="#/test?scrollTo=foo">Test/Foo</a></code>

Pendekatan Ringkas

Untuk pendekatan yang lebih mudah, anda boleh menggunakan kod yang diubah suai ini:

<code class="javascript">app.run(function($rootScope, $location, $anchorScroll) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});</code>

Pautan utama anda akan kelihatan seperti ini:

<code class="html"><a href="#/test#foo">Test/Foo</a></code>

Dengan memanfaatkan teknik ini, anda boleh mengendalikan dengan lancar pemautan cincang anchor dalam aplikasi AngularJS anda, memberikan pengalaman pengguna yang lancar untuk menavigasi halaman panjang dengan berbilang bahagian.

Atas ialah kandungan terperinci Bagaimana untuk Mengendalikan Anchor Hash Linking dalam Aplikasi AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!