35

Ich habe ein paar benutzerdefinierte Direktiven, die jQuery für Animationseffekte verwenden (Angular eingebautes ngShow/ngHide und dergleichen sind funktional, aber nicht hübsch). Ich glaube, ich erinnere mich in der Dokumentation irgendwo lesen, dass eckig hat einen eigenen DOM-Selektor (etwas wie angular.export() oder angular.select()), die ich anstelle von $(SELECTOR) verwenden sollte; aber ich kann es jetzt nicht finden.AngularJS-DOM-Selektor

ich so etwas wie das tue:

//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 bin wirklich nicht $('#'+newValue) manipulieren, nur Informationen abrufen darüber, so dass ich glaube nicht, daß ich ein Verbrechen gegen Eckige zu begehen.

Antwort

36

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

Sie können JavaScript versuchen querySelector.

+0

+1 Ich habe auch zusätzliche Informationen hinzugefügt, die erklären könnten, warum das OP glaubt, eine eckige Methode gesehen zu haben, mit der man Elemente auswählen kann. –

+0

Ah danke, ja das ist es genau. Ich schließe jQuery vor eckig ein, also ist 'eckle.element()' immer noch vorzuziehen? Es scheint, als würde es nur zusätzlichen Aufwand für die Auflösung des Alias ​​hinzufügen. – jacob

+4

@jacob, würde ich 'angular.element()' verwenden, so dass, wenn in der Zukunft Ihr Code jQuery nicht mehr benötigt, Sie es nicht aktualisieren müssen. –

38

Als official AngularJs doc says

Alle Elementreferenzen in Angular sind immer mit jQuery oder jqLite (wie das Element Argument in einer Kompilierung/link Funktion der Richtlinie) gewickelt. Sie sind niemals rohe DOM-Referenzen.

Im Detail: Wenn Sie jQueryvor Ihre Angular Referenz umfassen, wird die angular.element() Funktion einen Alias ​​für jQuery (es ist anders jqLite, siehe Antwort Mark Rajcok ist).


Sie im Dev-Tool Debugger überprüfen können, ob Sie jQuery oder jqLite werden immer auf der Linie einen Haltepunkt, indem, wo Sie angular.element() nennen. Wenn Sie den Mauszeiger darüber bewegen, werden Sie zur entsprechenden Bibliothek aufgefordert, siehe Abbildung unten (in meinem Fall habe ich jQuery erhalten).

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


Als official AngularJs doc says

Für Lookups von Tag-Namen, versuchen Sie stattdessen angular.element(document).find(...) oder $document.find()

Mit anderen Worten: Wenn Sie jQuery erhalten, wenn angular.element() Aufruf dann funktioniert alles wie angular.element('#foo > bar'), wenn Sie das sind Ich denke an.


Wenn Sie sich fragen, wie diese Wähler Funktion ohne jQuery zu bekommen, dann können Sie Sizzlejs verwenden möchten. Sizzle is the selector library that jQuery uses under the hood.