Wie kann ich eine reibungslose Anker-Hash-Verknüpfung in AngularJS-Anwendungen implementieren?

Umgang mit der Anker-Hash-Verknüpfung in AngularJS

Wenn Sie Probleme mit der Anker-Hash-Verknüpfung in AngularJS haben, gibt es eine einfache Lösung: $ AnchorScroll().

AngularJS bietet den Dienst $anchorScroll(), mit dem Sie problemlos zu jedem Element mit einer in $location.hash() gefundenen ID scrollen können. So können Sie es verwenden:

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

In Ihrem Markup können Sie dann die ng-click-Anweisung verwenden, um die Scroll-Aktion auszulösen:

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

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

Integration mit AngularJS Routing

Um $anchorScroll() mit AngularJS-Routing zu verwenden, befolgen Sie diese Schritte:

1. Konfigurieren Sie das Routing wie gewohnt.
2. Fügen Sie den folgenden Code hinzu:

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

Hier ist ein Beispiellink mit Routing:

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

Für einen noch einfacheren Ansatz können Sie dies tun Verwenden Sie diesen Code:

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

Und den entsprechenden Link:

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

Mit diesen Lösungen können Sie nahtlos auf Anker verlinken und zum entsprechenden Inhalt in Ihrer AngularJS-Anwendung scrollen.

Das obige ist der detaillierte Inhalt vonWie kann ich eine reibungslose Anker-Hash-Verknüpfung in AngularJS-Anwendungen implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!