web-dev-qa-db-fra.com

Rechercher un élément enfant dans la directive AngularJS

Je travaille dans une directive et j'ai des problèmes pour utiliser le paramètre element pour trouver ses fils par nom de classe.

.directive("ngScrollList", function(){
    return {
        restrict: 'AE',
        link: function($scope, element, attrs, controller) {

            var scrollable = element.find('div.list-scrollable');

            ...
        }
      };
})

Je peux le trouver par le nom de la balise, mais il ne parvient pas à le trouver par nom de classe, comme je peux le voir dans la console:

element.find('div')
[<div class=​"list-viewport">​…​</div>​,<div class=​"list-scrollable">​…​</div>​]
element.find('div.list-scrollable')
[]

Quelle serait la bonne façon de faire une telle chose? Je sais que je peux ajouter jQuery, mais je me demandais si cela ne serait pas excessif ...

javascriptangularjsangularjs-directive
60
vtortola

jQlite (le port "jQuery" d'angular) ne prend pas en charge la recherche par classe.

Une solution serait d'inclure jQuery dans votre application.

Une autre utilise QuerySelector ou QuerySelectorAll:

link: function(scope, element, attrs) {
   console.log(element[0].querySelector('.list-scrollable'))
}

Nous utilisons le premier élément du tableau element, qui est l'élément HTML. element.eq(0) donnerait le même résultat.

VIOLON

104
Mosho

Dans votre fonction de liaison, procédez comme suit:

// link function
function (scope, element, attrs) {
  var myEl = angular.element(element[0].querySelector('.list-scrollable'));
}

De plus, dans votre fonction de liaison, ne nommez pas votre variable scope à l'aide d'un $. Il s’agit d’une convention angular propre aux services angular intégrés et que vous ne souhaitez pas utiliser pour vos propres variables.

29
pje