web-dev-qa-db-fra.com

La méthode jQuery find () ne fonctionne pas dans la directive AngularJS

J'ai des problèmes avec les directives angularjs lors de la recherche d'éléments DOM enfant avec l'élément angular) injecté.

Par exemple, j'ai une directive comme celle-ci:

myApp.directive('test', function () {
    return {
        restrict: "A",
        link: function (scope, Elm, attr) {
            var look = Elm.find('#findme');
             Elm.addClass("addedClass");
            console.log(look);
        }
    };
});

et HTML tels que:

<div ng-app="myApp">
    <div test>TEST Div
        <div id="findme"></div>
    </div>
</div>

J'ai accès à l'élément qui est proféré en y ajoutant une classe. Cependant, tenter d'accéder à un élément enfant génère un tableau vide dans l'aspect var.

la démo de JSFiddle est ici .

Pourquoi quelque chose d'aussi trivial ne fonctionne pas correctement?

javascriptangularjsangularjs-directive
45
Ray Garner

Depuis le docs sur angular.element :

find() - Limité aux recherches par nom de balise

Donc, si vous n'utilisez pas jQuery avec Angular, mais comptez sur son implémentation de jqlite, vous ne pouvez pas utiliser Elm.find('#someid').

Vous avez accès aux implémentations children(), contents() et data(), de sorte que vous pouvez généralement trouver un moyen de les contourner.

75
satchmorun

Vous pouvez facilement résoudre ce problème en 2 étapes:

1- Accédez à l'élément enfant en utilisant querySelector comme ceci: var target = element[0].querySelector('tbody tr:first-child td')

2- Transformez-le à nouveau en un objet angular.element En faisant: var targetElement = angular.element(target)

Vous aurez alors accès à toutes les méthodes attendues sur la variable targetElement.

27
Felippe Nardi

Avant jQuery, vous utiliseriez:

   document.getElementById('findmebyid');

Si cette ligne vous permet d'économiser une bibliothèque jQuery entière, il peut être intéressant de l'utiliser.

Pour ceux qui s’inquiètent des performances: il est toujours préférable de commencer votre sélecteur par un ID, car il utilise la fonction native document.getElementById.

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

http://learn.jquery.com/performance/optimize-selectors/

jsPerf http://jsperf.com/jquery-selector-benchmark/32

13
Zymotik

find() - Limité aux recherches par nom de balise, vous pouvez voir plus d'informations https://docs.angularjs.org/api/ng/function/angular.element

Aussi, vous pouvez accéder par nom ou id ou appeler s'il vous plaît exemple suivant:

angular.element(document.querySelector('#txtName')).attr('class', 'error');
9
user3454062

J'ai utilisé

Elm.children('.class-name-or-whatever')

obtenir des enfants de l'élément en cours

1
simonpkerr