wake-up-neo.com

Die Methode jQuery find () funktioniert in der AngularJS-Direktive nicht

Ich habe Probleme mit AngularJS-Direktiven, die untergeordnete DOM-Elemente mit dem injizierten angular -Element finden.

Zum Beispiel habe ich eine Anweisung wie folgt:

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

und HTML wie:

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

Ich habe Zugriff auf das Element, das durch Hinzufügen einer Klasse erweitert wird. Der Versuch, auf ein untergeordnetes Element zuzugreifen, führt jedoch zu einem leeren Array im Var-Look.

JSFiddle Demo ist hier .

Warum funktioniert etwas so Triviales nicht richtig?

45
Ray Garner

Aus dem docs on angular.element :

find() - Beschränkt auf Suchen nach Tag-Namen

Wenn Sie also jQuery nicht mit Angular verwenden, sondern sich auf die jqlite-Implementierung verlassen, können Sie Elm.find('#someid') nicht ausführen.

Sie haben Zugriff auf children()-, contents()- und data() -Implementierungen, sodass Sie normalerweise einen Weg finden, dies zu umgehen.

75
satchmorun

Das können Sie ganz einfach in 2 Schritten lösen:

1- Erreichen Sie das untergeordnete Element mit Hilfe von querySelector wie folgt: var target = element[0].querySelector('tbody tr:first-child td')

2- Wandeln Sie es erneut in ein angular.element - Objekt um, indem Sie Folgendes ausführen: var targetElement = angular.element(target)

Sie haben dann Zugriff auf alle erwarteten Methoden für die Variable targetElement.

27
Felippe Nardi

Vor den Tagen von jQuery würden Sie verwenden:

   document.getElementById('findmebyid');

Wenn Sie mit dieser einen Zeile eine gesamte jQuery-Bibliothek speichern, lohnt es sich möglicherweise, sie stattdessen zu verwenden.

Für diejenigen, die sich Gedanken über die Leistung machen: Beginnen Sie Ihren Selektor immer mit einer ID, da die native Funktion document.getElementById verwendet wird.

// 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() - Beschränkt auf die Suche nach dem Tag-Namen können Sie weitere Informationen anzeigen https://docs.angularjs.org/api/ng/function/angular.element

Sie können auch per Name oder ID zugreifen oder bitte folgendes Beispiel anrufen:

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

Ich benutzte

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

kinder des aktuellen Elements zu bekommen

1
simonpkerr