Umgang mit Anker-Hash-Verknüpfungen in AngularJS

Weiß jemand von euch, wie man mit Anker-Hash-Verknüpfungen in AngularJS gut umgeht ?

Ich habe das folgende Markup für eine einfache FAQ-Seite

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

Wenn Sie auf einen der oben genannten Links klicken, fängt AngularJS mich ab und leitet mich zu einer völlig anderen Seite weiter (in meinem Fall zu einer 404-Seite, da keine Routen zu den Links passen).

Mein erster Gedanke war, eine Routenübereinstimmung " / faq /: kapitel " zu erstellen und in der entsprechenden Steuerung $routeParams.chapternach einem übereinstimmenden Element zu prüfen und dann mit jQuery nach unten zu scrollen.

Aber dann scheißt AngularJS wieder auf mich und scrollt trotzdem einfach zum Anfang der Seite.

Also hat hier jemand in der Vergangenheit etwas Ähnliches getan und kennt eine gute Lösung dafür?

Bearbeiten: Der Wechsel zu html5Mode sollte meine Probleme lösen, aber wir müssen trotzdem IE8 + unterstützen, daher befürchte ich, dass dies keine akzeptierte Lösung ist: /

Du suchst $anchorScroll().

Hier ist die (beschissene) Dokumentation.

Und hier ist die Quelle.

Grundsätzlich injizieren Sie es einfach und rufen es in Ihrem Controller auf, und es führt Sie zu einem beliebigen Element mit der darin gefundenen ID $location.hash()

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>

Hier ist ein Plunker zu demonstrieren

BEARBEITEN: um dies beim Routing zu verwenden

Richten Sie Ihr Winkelrouting wie gewohnt ein und fügen Sie dann einfach den folgenden Code hinzu.

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();  
  });
});

und dein Link würde so aussehen:

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

Hier ist ein Plunker, der das Scrollen mit Routing und $ anchorScroll demonstriert

Und noch einfacher:

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();  
  });
});

und dein Link würde so aussehen:

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

In meinem Fall habe ich festgestellt, dass die Routing-Logik aktiviert wurde, wenn ich die geändert habe $location.hash(). Der folgende Trick hat funktioniert ..

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    //reset to old to keep any additional routing logic from kicking in
    $location.hash(old);
};

Es ist nicht erforderlich, das Routing oder andere Elemente zu ändern, die nur zum target="_self"Erstellen der Links verwendet werden müssen

Beispiel:

<a href="#faq-1" target="_self">Question 1</a>
<a href="#faq-2" target="_self">Question 2</a>
<a href="#faq-3" target="_self">Question 3</a>

Und verwenden Sie das idAttribut in Ihren HTML- Elementen wie folgt:

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

Es ist nicht erforderlich, ## zu verwenden, wie in den Kommentaren angegeben / erwähnt ;-)

<a href="##faq-1">Question 1</a>
<a href="##faq-2">Question 2</a>
<a href="##faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

Wenn Sie die Route immer kennen, können Sie den Anker einfach wie folgt anhängen:

href="#/route#anchorID

Wo routeist die aktuelle Winkelroute und anchorIDstimmt mit einer <a id="anchorID">irgendwo auf der Seite überein

$anchorScroll funktioniert dafür, aber es gibt eine viel bessere Möglichkeit, es in neueren Versionen von Angular zu verwenden.

Akzeptiert jetzt $anchorScrollden Hash als optionales Argument, sodass Sie ihn überhaupt nicht ändern müssen $location.hash. ( Dokumentation )

Dies ist die beste Lösung, da sie die Route überhaupt nicht beeinflusst. Ich konnte keine der anderen Lösungen zum Laufen bringen, da ich ngRoute verwende und die Route neu geladen wird, sobald ich sie festgelegt habe $location.hash(id), bevor $anchorScrollsie ihre Magie entfalten kann .

So verwenden Sie es ... zuerst in der Direktive oder im Controller:

$scope.scrollTo = function (id) {
  $anchorScroll(id);  
}

und dann in der Ansicht:

<a href="" ng-click="scrollTo(id)">Text</a>

Wenn Sie eine feste Navigationsleiste (oder eine andere Benutzeroberfläche) berücksichtigen müssen, können Sie den Offset für $ anchorScroll wie folgt festlegen (in der Ausführungsfunktion des Hauptmoduls):

.run(function ($anchorScroll) {
   //this will make anchorScroll scroll to the div minus 50px
   $anchorScroll.yOffset = 50;
});

Dies war meine Lösung mit einer Direktive, die eher eckig erscheint, weil wir es mit dem DOM zu tun haben:

Plnkr hier drüben

Github

CODE

angular.module('app', [])
.directive('scrollTo', function ($location, $anchorScroll) {
  return function(scope, element, attrs) {

    element.bind('click', function(event) {
        event.stopPropagation();
        var off = scope.$on('$locationChangeStart', function(ev) {
            off();
            ev.preventDefault();
        });
        var location = attrs.scrollTo;
        $location.hash(location);
        $anchorScroll();
    });

  };
});

HTML

<ul>
  <li><a href="" scroll-to="section1">Section 1</a></li>
  <li><a href="" scroll-to="section2">Section 2</a></li>
</ul>

<h1 id="section1">Hi, I'm section 1</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

<h1 id="section2">I'm totally section 2</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

Ich habe den Dienst $ anchorScroll verwendet. Um der mit dem Hash-Wechsel einhergehenden Seitenaktualisierung entgegenzuwirken, habe ich das locationChangeStart-Ereignis abgebrochen. Dies funktionierte für mich, weil ich eine Hilfeseite an einen ng-Schalter angeschlossen hatte und die Aktualisierungen die App im Wesentlichen beschädigen würden.

Versuchen Sie, ein Hash-Präfix für Winkelrouten festzulegen $locationProvider.hashPrefix('!')

Vollständiges Beispiel:

angular.module('app', [])
  .config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider){
      $routeProvider.when( ... );
      $locationProvider.hashPrefix('!');
    }
  ])

Ich habe dies in der Routenlogik für meine App umgangen.

function config($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/partials/search.html',
      controller: 'ctrlMain'
    })
    .otherwise({
      // Angular interferes with anchor links, so this function preserves the
      // requested hash while still invoking the default route.
      redirectTo: function() {
        // Strips the leading '#/' from the current hash value.
        var hash = '#' + window.location.hash.replace(/^#\//g, '');
        window.location.hash = hash;
        return '/' + hash;
      }
    });
}

Dies ist ein alter Beitrag, aber ich habe lange nach verschiedenen Lösungen gesucht, deshalb wollte ich eine einfachere teilen. Hinzufügen nur target="_self"auf die<a> Tag hat es für mich behoben. Der Link funktioniert und bringt mich zum richtigen Ort auf der Seite.

Angular fügt dem # in der URL jedoch immer noch eine gewisse Verrücktheit hinzu, sodass Sie möglicherweise Probleme haben, wenn Sie die Zurück-Schaltfläche für die Navigation und dergleichen verwenden, nachdem Sie diese Methode verwendet haben.

Dies mag ein neues Attribut für ngView sein, aber ich habe es geschafft, Anker-Hash-Links zu verwenden, um mit angular-routedem ngView autoscrollAttribut und 'Doppel-Hashes' zu arbeiten.

ngView (siehe Autoscroll)

(Der folgende Code wurde mit Winkelriemen verwendet)

<!-- use the autoscroll attribute to scroll to hash on $viewContentLoaded -->    
<div ng-view="" autoscroll></div>

<!-- A.href link for bs-scrollspy from angular-strap -->
<!-- A.ngHref for autoscroll on current route without a location change -->
<ul class="nav bs-sidenav">
  <li data-target="#main-html5"><a href="#main-html5" ng-href="##main-html5">HTML5</a></li>
  <li data-target="#main-angular"><a href="#main-angular" ng-href="##main-angular" >Angular</a></li>
  <li data-target="#main-karma"><a href="#main-karma" ng-href="##main-karma">Karma</a></li>
</ul>

Ich könnte das so machen:

<li>
<a href="#/#about">About</a>
</li>

Hier ist eine Art schmutzige Problemumgehung, indem Sie eine benutzerdefinierte Direktive erstellen, die zu einem bestimmten Element scrollt (mit fest codierter "FAQ").

app.directive('h3', function($routeParams) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs){        
        if ('faq'+$routeParams.v == attrs.id) {
          setTimeout(function() {
             window.scrollTo(0, element[0].offsetTop);
          },1);        
        }
    }
  };
});

http://plnkr.co/edit/Po37JFeP5IsNoz5ZycFs?p=preview

<a href="/#/#faq-1">Question 1</a>
<a href="/#/#faq-2">Question 2</a>
<a href="/#/#faq-3">Question 3</a>

Wenn Sie nicht verwenden möchten, finden Sie ng-clickhier eine alternative Lösung. Es verwendet a filter, um die richtige URL basierend auf dem aktuellen Status zu generieren. In meinem Beispiel wird ui.router verwendet .

Der Vorteil ist, dass der Benutzer sieht, wo der Link schwebt.

<a href="{{ 'my-element-id' | anchor }}">My element</a>

Der Filter:

.filter('anchor', ['$state', function($state) {
    return function(id) {
        return '/#' + $state.current.url + '#' + id;
    };
}])

Meine Lösung mit ng-route war diese einfache Anweisung:

   app.directive('scrollto',
       function ($anchorScroll,$location) {
            return {
                link: function (scope, element, attrs) {
                    element.click(function (e) {
                        e.preventDefault();
                        $location.hash(attrs["scrollto"]);
                        $anchorScroll();
                    });
                }
            };
    })

Das HTML sieht aus wie:

<a href="" scrollTo="yourid">link</a>

Sie könnten versuchen, anchorScroll zu verwenden .

Beispiel

Der Controller wäre also:

app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
  $scope.scrollTo = function(id) {
     $location.hash(id);
     $anchorScroll();
  }
});

Und die Aussicht:

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

... und kein Geheimnis für die Anker-ID:

<div id="foo">
  This is #foo
</div>

Ich habe versucht, meine Angular-App zu einem Anker-Opon-Ladevorgang zu scrollen, und bin auf die URL-Umschreibregeln von $ routeProvider gestoßen.

Nach langen Experimenten habe ich mich dazu entschlossen:

1. Registrieren Sie einen event.onload-Ereignishandler im Abschnitt .run () des Angular-App-Moduls.
2. Finden Sie im Handler heraus, was das Original-Ankertag haben soll, indem Sie einige Zeichenfolgenoperationen ausführen.
3. überschreiben Sie location.hash mit dem abgespeckten Ankertag (wodurch $ routeProvider es sofort wieder mit der Regel "# /" überschreibt. Aber das ist in Ordnung, da Angular jetzt mit dem synchronisiert ist, was in URL 4 vor sich geht) $ anchorScroll ().

angular.module("bla",[]).}])
.run(function($location, $anchorScroll){
         $(document).ready(function() {
	 if(location.hash && location.hash.length>=1)    		{
			var path = location.hash;
			var potentialAnchor = path.substring(path.lastIndexOf("/")+1);
			if ($("#" + potentialAnchor).length > 0) {   // make sure this hashtag exists in the doc.                          
			    location.hash = potentialAnchor;
			    $anchorScroll();
			}
		}	 
 });

Ich bin nicht 100% sicher, ob dies die ganze Zeit funktioniert, aber in meiner Anwendung gibt mir dies das erwartete Verhalten.

Nehmen wir an, Sie befinden sich auf der Seite ÜBER und haben die folgende Route:

yourApp.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
            when('/about', {
                templateUrl: 'about.html',
                controller: 'AboutCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
        }
]);

Nun, in Ihnen HTML

<ul>
    <li><a href="#/about#tab1">First Part</a></li>
    <li><a href="#/about#tab2">Second Part</a></li>
    <li><a href="#/about#tab3">Third Part</a></li>                      
</ul>

<div id="tab1">1</div>
<div id="tab2">2</div>
<div id="tab3">3</div>

Abschließend

Das Einfügen des Seitennamens vor dem Anker hat den Trick für mich getan. Lass mich deine Gedanken wissen.

Nachteil

Dadurch wird die Seite erneut gerendert und anschließend zum Anker gescrollt.

AKTUALISIEREN

Ein besserer Weg ist, Folgendes hinzuzufügen:

<a href="#tab1" onclick="return false;">First Part</a>

Holen Sie sich Ihre Bildlauffunktion einfach. Als zusätzliche Funktion wird auch das animierte / reibungslose Scrollen unterstützt . Details zur Angular Scroll- Bibliothek:

Github - https://github.com/oblador/angular-scroll

Laube :bower install --save angular-scroll

npm :npm install --save angular-scroll

Minfied Version - nur 9kb

Reibungsloses Scrollen (animiertes Scrollen) - ja

Scroll Spy - ja

Dokumentation - ausgezeichnet

Demo - http://oblador.github.io/angular-scroll/

Hoffe das hilft.

Basierend auf @Stoyan habe ich die folgende Lösung gefunden:

app.run(function($location, $anchorScroll){
    var uri = window.location.href;

    if(uri.length >= 4){

        var parts = uri.split('#!#');
        if(parts.length > 1){
            var anchor = parts[parts.length -1];
            $location.hash(anchor);
            $anchorScroll();
        }
    }
});

Beim Ändern der Route wird zum oberen Rand der Seite gescrollt.

 $scope.$on('$routeChangeSuccess', function () {
      window.scrollTo(0, 0);
  });

Setzen Sie diesen Code auf Ihren Controller.

In meinen Gedanken hatte @slugslog es, aber ich würde eines ändern. Ich würde stattdessen Ersetzen verwenden, damit Sie es nicht zurücksetzen müssen.

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id).replace();
    $anchorScroll();
};

Docs Suche nach "Methode ersetzen"

Keine der oben genannten Lösungen funktioniert für mich, aber ich habe es gerade versucht, und es hat funktioniert.

<a href="#/#faq-1">Question 1</a>

Daher wurde mir klar, dass ich die Seite benachrichtigen muss, um mit der Indexseite zu beginnen und dann den herkömmlichen Anker zu verwenden.

Manchmal in der AngularJS-Anwendung funktioniert die Hash-Navigation nicht und Bootstrap-JQuery-Javascript-Bibliotheken verwenden diese Art der Navigation in großem Umfang, damit sie target="_self"zum Ankertag hinzugefügt werden kann . z.B<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

Siehe https://code.angularjs.org/1.4.10/docs/api/ngRoute/provider/ $ routeProvider

[reloadOnSearch = true] - {boolean =} - Route neu laden, wenn sich nur $ location.search () oder $ location.hash () ändert.

Das Setzen auf false hat den Trick ohne all das für mich getan.

Ich verwende AngularJS 1.3.15 und muss anscheinend nichts Besonderes tun.

https://code.angularjs.org/1.3.15/docs/api/ng/provider/ $ anchorScrollProvider

Also funktioniert folgendes für mich in meinem HTML:

<ul>
  <li ng-repeat="page in pages"><a ng-href="#{{'id-'+id}}">{{id}}</a>
  </li>
</ul>
<div ng-attr-id="{{'id-'+id}}" </div>

Ich musste überhaupt keine Änderungen an meinem Controller oder JavaScript vornehmen.