Ankerlinks in Angularjs?



angularjs tutorial pdf (9)

Ist es möglich, Ankerverbindungen mit Angularjs zu verwenden?

Dh:

 <a href="#top">Top</a>
 <a href="#middle">Middle</a>
 <a href="#bottom">Bottom</a>

 <div name="top"></div>
 ...
 <div name="middle"></div>
 ...
 <div name="bottom"></div>

Vielen Dank


Answer #1

Es gibt ein paar Möglichkeiten, dies zu tun, wie es scheint.

Option 1: Native Angular

Angular bietet einen $anchorScroll Dienst, aber die Dokumentation fehlt sehr und ich konnte sie nicht zum $anchorScroll bringen.

$anchorScroll Sie http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html für einige Einblicke in $anchorScroll .

Option 2: Benutzerdefinierte Richtlinie / Native JavaScript

Ein anderer Weg, den ich ausprobiert habe, war das Erstellen einer benutzerdefinierten Direktive und die Verwendung von el.scrollIntoView() . Dies funktioniert ziemlich gut, indem Sie im Wesentlichen Folgendes in Ihrer directive link-Funktion tun:

var el = document.getElementById(attrs.href);
el.scrollIntoView();

Es scheint jedoch etwas übertrieben zu sein, beides zu tun, wenn der Browser dies nativ unterstützt, oder?

Option 3: Angular Override / Native Browser

Wenn Sie sich http://docs.angularjs.org/guide/dev_guide.services.$location und dessen HTML Link Rewriting Abschnitt ansehen, werden Sie sehen, dass Links im folgenden nicht neu geschrieben werden:

Links, die ein Zielelement enthalten

Beispiel: <a href="/ext/link?a=b" target="_self">link</a>

Sie müssen also lediglich das target zu Ihren Links hinzufügen:

<a href="#anchorLinkID" target="_self">Go to inpage section</a>

Angular verwendet standardmäßig den Browser und da es sich um einen Anker-Link und nicht um eine andere Basis-URL handelt, scrollt der Browser nach Wunsch zum richtigen Ort.

Ich ging mit Option 3, weil es hier am besten ist, sich auf native Browser-Funktionalität zu verlassen, und spart uns Zeit und Mühe.

Zu beachten ist, dass Angular nach einer erfolgreichen Scroll- und Hash-Änderung den Hash-Code nach seinem benutzerdefinierten Stil neu schreibt. Der Browser hat jedoch bereits seine Arbeit abgeschlossen, und Sie sind gut zu gehen.


Answer #2

Sie könnten versuchen, anchorScroll zu verwenden.

Example

Also wäre der Controller:

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>

Answer #3

Ich hatte das gleiche Problem, aber das funktionierte für mich:

<a ng-href="javascript:void(0);#tagId"></a>


Answer #5

Wenn Sie SharePoint und eckig verwenden, dann tun Sie es wie folgt:

<a ng-href="{{item.LinkTo.Url}}" target="_blank" ng-bind="item.Title;" ></a> 

Wo LinkTo und Titel ist SharePoint-Spalte.


Answer #6

Funktioniert bei mir:

 <a onclick='return false;' href="" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" ng-href="#profile#collapse{{$index}}"> blalba </a>

Answer #7

Sie müssen nur target = "_ self" zu Ihrem Link hinzufügen

Ex. <a href="#services" target="_self">Services</a>


Answer #8

Die beste Wahl für mich war, eine Direktive zu erstellen, um die Arbeit zu erledigen, weil $location.hash() und $anchorScroll() die URL kapern, wodurch viele Probleme für mein SPA-Routing entstehen.

MyModule.directive('myAnchor', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, elem, attrs, ngModel) {
      return elem.bind('click', function() {
        //other stuff ...
        var el;
        el = document.getElementById(attrs['myAnchor']);
        return el.scrollIntoView();
      });      
    }
  };
});

Answer #9

Sie können auch vom Controller aus zur HTML-ID navigieren

$location.hash('id_in_html');




angularjs