Come selezionare un elemento per classname usando jqLite?

110

Sto provando a rimuovere jquery dalla mia app Angular.js per renderla più leggera, inserendo invece jqLite di Angular. Ma l'app fa un uso massiccio di find ('# id') e find ('.classname'), che non sono supportati da jqLite, solo 'tag names' (come da documentazione)

mi chiedevo quale sarebbe l'approccio migliore per cambiarlo. Un approccio a cui ho pensato è creare tag HTML personalizzati. ad esempio: cambiamento
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

per

<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>

$element.find('#add-to-bag')

per

$element.find('a2b')

qualche idea? altre idee?

Grazie

Lior

angularjs angularjs-directive jqlite

— Lior
fonte

Gli ID devono essere univoci, quindi non ha senso trovare un elemento figlio di un altro elemento per ID. Seleziona semplicemente l'elemento per Id. Se i tuoi ID non sono univoci, cambia il tuo ID in una classe. Inoltre, puoi utilizzare DomElement.querySelector(".myclassname")per selezionare un singolo elemento decendente utilizzando un selettore CSS o tutte le corrispondenze aggiungendovi All: DomElement.querySelectorAll(".myclassname")questo ovviamente non funziona in IE <9.

— Kevin B

Se definisci un a2belemento, devi aver definito una direttiva. Potete fare ciò che deve essere fatto nella funzione link della direttiva, e quindi evitare la necessità di chiamare completamente find ()? Allo stesso modo con le vostre classi: potete definire direttive e mettere le funzionalità di cui avete bisogno nelle funzioni di collegamento (o compilazione) delle direttive?

— Mark Rajcok

Si dice che jqLite di @KevinB Angular supporti "solo i nomi dei tag"

— Lior

@MarkRajcok Non ho definito una direttiva. sembra funzionare in IE e Chrome. ma anche se definissi una direttiva, perché aiuterebbe? Avrei ancora bisogno di entrare in possesso di un elemento DOM.

— Lior

Come mai find ('span.btn') o simili non funzionano per te?

— Fabi

Risposte:

202

Essenzialmente, e come notato da @ kevin-b:

// find('#id')
angular.element(document.querySelector('#id'))

//find('.classname'), assumes you already have the starting elem to search from
angular.element(elem.querySelector('.classname'))

Nota: se stai cercando di farlo dai tuoi controller, potresti voler dare un'occhiata alla sezione "Utilizzo corretto dei controller" nella guida per sviluppatori e refactoring della tua logica di presentazione in direttive appropriate (come <a2b ...>) .

— psema4
fonte

Grazie! da aggiungere dalla risposta di Ricardo Bin (la mailing list di angular

— Lior

Sfortunatamente, l'URL indicato non è più valido ( docs.angularjs.org/guide/dev_guide.mvc.understanding_controller ) e non sembra esserci alcuna sostituzione in quella sezione.

— Per Quested Aronsson

No. angular.element (document.querySelector ('# id')) è l'alternativa a: $ ('# id'), non per: elementArray.find ('# id')

— Broda Noel

Esatto, ma come abbiamo scoperto mentre costruiamo nuove parti della nostra applicazione in angolare, a volte abbiamo bisogno di "applicare nastro adesivo" su parti più vecchie per un po 'finché non possono essere aggiornate o rifattorizzate. Nel nostro caso dovevamo caricare alcuni vecchi dati jquery / ajax senza modificare il pasticcio esistente, quindi abbiamo fatto quanto segue- $ http.get ('/ Task / GetTaskStatsByTaskId /' + taskId) .success (function (data) {angular.element (document.querySelector ('# userTasksContainer')). html (data);});

— Kenn

Se elem è un oggetto jqlite, sarebbeangular.element(elem[0].querySelector('.classname'));

— cleversprocket

angualr utilizza la versione più leggera di jquery chiamata jqlite, il che significa che non ha tutte le caratteristiche di jQuery. ecco un riferimento nei documenti angularjs su ciò che puoi usare da jquery. Documenti elemento angolare

Nel tuo caso devi trovare un div con ID o nome della classe. come nome della classe puoi usare

var elems =$element.find('div') //returns all the div's in the $elements
    angular.forEach(elems,function(v,k)){
    if(angular.element(v).hasClass('class-name')){
     console.log(angular.element(v));
}}

oppure puoi usare un modo molto più semplice dal selettore di query

angular.element(document.querySelector('#id'))

angular.element(elem.querySelector('.classname'))

non è flessibile come jQuery ma cosa

— hannad rehman
fonte

Se elem.find()non funziona per te, controlla di includere lo script JQuery prima dello script angolare ....

— ancajic
fonte

Sebbene l'OP abbia chiesto specificamente di jqLite, per coloro che usano jQuery e si aspettano che find () lavori anche con classi e ID, questa risposta può sicuramente aiutare.

— Matt B

Per chiarire: "Se jQuery è disponibile, angular.element è un alias per la funzione jQuery. Se jQuery non è disponibile, angular.element delega al sottoinsieme integrato di Angular di jQuery, chiamato" jQuery lite "o jqLite.". Citazione da: docs.angularjs.org/api/ng/function/angular.element . jqLite contiene find ().

— Kmaczek