Bagaimana untuk Mengendalikan Pautan Hash Anchor dalam AngularJS tanpa Penghalaan yang Tidak Diingini?

Mengendalikan Anchor Hash Linking dalam AngularJS

Apabila bekerja dengan AngularJS, mengendalikan pemautan anchor hash boleh menjadi mencabar. Pautan cincang anchor membolehkan pengguna menavigasi dalam halaman dengan mengklik pada pautan yang membawa kepada bahagian tertentu. Walau bagaimanapun, dalam AngularJS, pautan sedemikian sering membawa kepada gelagat penghalaan yang tidak diingini.

Isu timbul apabila AngularJS memintas pautan cincang anchor dan cuba untuk membuat laluan ke halaman lain. Masalah ini mengecewakan, terutamanya untuk aplikasi yang memerlukan navigasi dalam halaman.

Penyelesaian: Menggunakan $anchorScroll()

Penyelesaian kepada masalah ini terletak pada $ perkhidmatan anchorScroll() disediakan oleh AngularJS. Perkhidmatan ini membolehkan anda menatal dengan lancar ke elemen tertentu dalam halaman berdasarkan IDnya.

Pelaksanaan

Untuk melaksanakan $anchorScroll(), ikut langkah berikut:

1. Suntikan $anchorScroll() ke dalam pengawal anda.
2. Tentukan fungsi yang menerima parameter ID.
3. Kemas kini $location.hash agar sepadan dengan ID yang diberikan.
4. Guna $anchorScroll() untuk melakukan penatalan.

Contoh:

<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>

Menggunakan $anchorScroll() dengan Penghalaan

Dalam senario yang melibatkan penghalaan AngularJS, anda boleh melanjutkan pendekatan $anchorScroll() seperti berikut:

1. Sediakan penghalaan anda seperti biasa.
2. Tambahkan pendengar untuk acara '$routeChangeSuccess'.
3. Dalam pengendali acara, kemas kini $location.hash kepada parameter "scrollTo" yang ditentukan.
4. Panggil $anchorScroll() untuk melaksanakan penatalan.

Pendekatan Ringkas

Untuk penyelesaian yang lebih mudah, anda boleh mendengar acara '$routeChangeSuccess' dan semak sama ada cincang anchor hadir :

<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>

Dengan pengubahsuaian ini, pautan anda hanya boleh memasukkan cincang sauh:

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

Atas ialah kandungan terperinci Bagaimana untuk Mengendalikan Pautan Hash Anchor dalam AngularJS tanpa Penghalaan yang Tidak Diingini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!