Wie gehe ich mit der Anker-Hash-Verknüpfung in AngularJS ohne unbeabsichtigtes Routing um?

Umgang mit Anker-Hash-Verknüpfungen in AngularJS

Bei der Arbeit mit AngularJS kann der Umgang mit Anker-Hash-Verknüpfungen eine Herausforderung darstellen. Mithilfe der Anker-Hash-Verknüpfung können Benutzer innerhalb einer Seite navigieren, indem sie auf Links klicken, die zu bestimmten Abschnitten führen. In AngularJS führen solche Links jedoch häufig zu unbeabsichtigtem Routing-Verhalten.

Das Problem tritt auf, wenn AngularJS den Anker-Hash-Link abfängt und versucht, zu einer anderen Seite weiterzuleiten. Dieses Problem ist frustrierend, insbesondere für Anwendungen, die eine In-Page-Navigation erfordern.

Die Lösung: Verwendung von $anchorScroll()

Die Lösung für dieses Problem liegt im $ AnchorScroll()-Dienst, bereitgestellt von AngularJS. Mit diesem Dienst können Sie basierend auf seiner ID reibungslos zu einem bestimmten Element innerhalb einer Seite scrollen.

Implementierung

Um $anchorScroll() zu implementieren, befolgen Sie diese Schritte:

1. Injizieren Sie $anchorScroll() in Ihren Controller.
2. Definieren Sie eine Funktion, die einen ID-Parameter empfängt.
3. Aktualisieren Sie den $location.hash so, dass er mit der bereitgestellten ID übereinstimmt.
4. Rufen Sie $anchorScroll() auf, um den Bildlauf durchzuführen.

Beispiel:

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

Verwendung von $anchorScroll() mit Routing

In Szenarien mit AngularJS-Routing können Sie den $anchorScroll()-Ansatz wie folgt erweitern:

1. Richten Sie Ihr Routing wie gewohnt ein.
2. Fügen Sie einen Listener für das Ereignis „$routeChangeSuccess“ hinzu.
3. Aktualisieren Sie im Ereignishandler den $location.hash auf den angegebenen „scrollTo“-Parameter.
4. Rufen Sie zur Ausführung $anchorScroll() auf das Scrollen.

Vereinfachter Ansatz

Für eine einfachere Lösung können Sie auf das Ereignis „$routeChangeSuccess“ warten und prüfen, ob ein Anker-Hash vorhanden ist :

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

Mit dieser Änderung können Ihre Links einfach einen Anker-Hash enthalten:

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

Das obige ist der detaillierte Inhalt vonWie gehe ich mit der Anker-Hash-Verknüpfung in AngularJS ohne unbeabsichtigtes Routing um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!