Bagaimanakah saya boleh melaksanakan pemautan hash anchor yang lancar dalam aplikasi AngularJS?

Mengendalikan Anchor Hash Linking dalam AngularJS

Jika anda menghadapi masalah dengan anchor hash linking dalam AngularJS, terdapat penyelesaian mudah yang tersedia: $ anchorScroll().

AngularJS menyediakan perkhidmatan $anchorScroll(), yang membolehkan anda menatal dengan mudah ke mana-mana elemen dengan ID yang terdapat dalam $location.hash(). Begini cara anda boleh menggunakannya:

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

Dalam markup anda, anda kemudian boleh menggunakan arahan ng-click untuk mencetuskan tindakan menatal:

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

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

Integrasi dengan AngularJS Penghalaan

Untuk menggunakan $anchorScroll() dengan penghalaan AngularJS, ikut langkah berikut:

1. Konfigurasikan penghalaan seperti biasa.
2. Tambahkan 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>

Berikut ialah pautan contoh dengan penghalaan:

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

Untuk pendekatan yang lebih mudah, anda boleh gunakan kod 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>

Dan pautan yang sepadan:

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

Dengan penyelesaian ini, anda boleh memaut dengan lancar ke sauh dan tatal ke kandungan yang sepadan dalam aplikasi AngularJS anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh melaksanakan pemautan hash anchor yang lancar dalam aplikasi AngularJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!