Selettore angularJS DOM

Question

Ho alcune direttive personalizzate che usano jQuery per effetti di animazione (il built-in di ngShow/ngHide di angular è funzionale, ma non bello). Penso di ricordare di aver letto nella documentazione da qualche parte che l'angolare ha il proprio selettore DOM (qualcosa come angular.export() o angular.select()) che dovrei usare al posto di $(SELECTOR); tuttavia non riesco a trovarlo ora.

che sto facendo qualcosa di simile:

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

} 

Non sto davvero manipolare $('#'+newValue), solo il recupero di informazioni su di esso, quindi non pensare che sto commettendo un crimine contro l'angolare.

Answer 1

"jqLite" (definita nella pagina angular.element) fornisce DOM metodi di attraversamento come children(), parent(), contents(), find(), next() (ma non previous()). Non esiste un metodo simile a un selettore.

Si potrebbe desiderare di provare JavaScript querySelector.

Answer 2

Come il official AngularJs doc says

Tutti i riferimenti degli elementi in angolare sono sempre avvolti con jQuery o jqLite (come ad esempio l'argomento elemento in funzione di compilazione/link di una direttiva). Non sono mai riferimenti DOM grezzi.

Nel dettaglio: se si include jQueryprima vostro riferimento angolare, la funzione angular.element() diventa un alias per jQuery (è altrimenti jqLite, vedere la risposta di Mark Rajcok).

---

È possibile controllare nel debugger Dev Tool se hai trovato jQuery o jqLite mettendo un punto di interruzione nella riga in cui si chiama angular.element(). Al passaggio del mouse, ti verrà richiesta la libreria pertinente, vedi screenshot qui sotto (nel mio caso, ricevo jQuery).

---

Come il official AngularJs doc says

Per le ricerche per nome tag, prova invece angular.element(document).find(...) o $document.find()

In altre parole: se si ottiene jQuery quando si chiama angular.element(), allora qualcosa come angular.element('#foo > bar') funziona se è quello che sei e pensando a.

---

Se vi state chiedendo come ottenere questa funzionalità di selezione senza jQuery, quindi si consiglia di utilizzare Sizzlejs. Sizzle is the selector library that jQuery uses under the hood.