web-dev-qa-db-fra.com

Comment sélectionner un élément par nom de classe en utilisant jqLite?

J'essaie de supprimer jQuery de mon application Angular.js afin de l'alléger, et de remplacer jqLite par Angular. Mais l'application utilise beaucoup les fonctions find ('# id') et find ('.classname'), qui ne sont pas prises en charge par jqLite, mais uniquement les 'noms de balises' (selon la documentation).

je me demandais quelle serait la meilleure approche pour le changer. Une approche à laquelle j'ai pensé est de créer des balises HTML personnalisées. par exemple: changement
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

à

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

et

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

à

$element.find('a2b')

Des pensées? d'autres idées?

merci

Lior

angularjsangularjs-directivejqlite
108
Lior

Essentiellement, et comme noté par @ 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'))

Remarque: Si vous souhaitez effectuer cette opération à partir de vos contrôleurs, consultez la section "Utilisation correcte des contrôleurs" dans la section - Guide du développeur et reformulez votre logique de présentation en directives appropriées (telles que <a2b ...>).

201
psema4

Si elem.find() ne fonctionne pas pour vous, vérifiez que vous incluez le script JQuery avant angular script ....

2
ancajic

angualr utilise la version plus légère de jquery appelée jqlite, ce qui signifie qu’elle n’a pas toutes les fonctionnalités de jQuery. Voici une référence dans angularjs docs sur ce que jquery peut utiliser. docs élément angulaire

Dans votre cas, vous devez trouver un div avec un identifiant ou un nom de classe. pour le nom de la classe, vous pouvez utiliser

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

ou vous pouvez utiliser un moyen beaucoup plus simple par sélecteur de requête

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

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

ce n'est pas aussi flexible que jQuery mais quoi

1
hannad rehman