webentwicklung-frage-antwort-db.com.de

AngularJS DOM-Auswahl

Ich habe ein paar benutzerdefinierte Direktiven, die jQuery für Animationseffekte verwenden (Angulars integriertes ngShow/ngHide und ähnliches sind funktional, aber nicht hübsch). Ich denke, ich erinnere mich, dass ich irgendwo in der Dokumentation gelesen habe, dass angular) einen eigenen DOM-Selektor hat (so etwas wie angular.export() oder angular.select()), den ich anstelle von verwenden sollte $(SELECTOR), aber ich kann es jetzt nicht finden.

Ich mache so etwas:

//view
<div scroll-to="element"> //`element` is set via ng-click
  …
</div>

//directive
link: function(scope, Elm, attrs)
{

  scope.$watch(attrs.scrollTo, function scrollToAction(newValue,oldValue)
  {
    if ( newValue !== oldValue )
    {
      Elm.animate({
        scrollTop:
          $('#'+newValue).offset().top //replace jquery selector with angular's
          - Elm.offset().top
          + Elm.scrollTop()
      });
    }
  });

}

Ich manipuliere $('#'+newValue) nicht wirklich, sondern rufe nur Informationen darüber ab. Ich glaube also nicht, dass ich ein Verbrechen gegen Angular begehen werde.

35
jacob

"jqLite" (definiert auf der Seite angle.element ) bietet DOM-Traversal-Methoden wie children(), parent(), contents(), find(), next() (aber nicht previous()). Es gibt keine selektorähnliche Methode.

Vielleicht möchten Sie JavaScript's querySelector ausprobieren.

36
Mark Rajcok

Wie das offizielles AngularJs-Dokument sagt

Alle Elementreferenzen in Angular werden immer umbrochen mit jQuery oder jqLite (wie das Elementargument in der Kompilier-/Verknüpfungsfunktion einer Direktive). Sie sind niemals rohe DOM-Referenzen.

Im Detail: Wenn Sie jQuery before Ihre Angular Referenz, die angular.element() function wird ein Alias ​​für jQuery (ansonsten jqLite, siehe Mark Rajcoks Antwort).


Sie können im Dev Tool-Debugger überprüfen, ob Sie jQuery oder jqLite erhalten, indem Sie einen Haltepunkt in die Zeile einfügen, in der Sie angular.element() aufrufen. Wenn Sie den Mauszeiger darüber halten, werden Sie zur Eingabe der entsprechenden Bibliothek aufgefordert (siehe Abbildung unten) (in meinem Fall erhalte ich jQuery).

jQuery for <code>angular.element()</code>


Wie das offizielles AngularJs-Dokument sagt

Versuchen Sie stattdessen angular.element(document).find(...) oder $document.find(), um nach Tagnamen zu suchen.

Mit anderen Worten: Wenn Sie beim Aufrufen von angular.element() jQuery erhalten, funktioniert etwas wie angular.element('#foo > bar'), wenn Sie daran denken.


Wenn Sie sich fragen, wie Sie diese Auswahlfunktion ohne jQuery erhalten können, können Sie Sizzlejs verwenden. Sizzle ist die Auswahlbibliothek, die jQuery unter der Haube verwendet .

38
Ben Lesh