Finden Kind Element in AngularJS Direktive

Question

Ich arbeite in einer Direktive und ich habe Probleme mit dem Parameter element, um seine Childs nach Klassennamen zu finden.

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

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

      ... 
     } 
     }; 
}) 

ich es durch die Tag-Namen finden kann, aber es scheitert es von Klassennamen zu finden, wie ich in der Konsole sehen:

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

Welches ist die richtige Art und Weise zu tun, so etwas wäre? Ich weiß, ich kann jQuery hinzufügen, aber ich frage mich, ob würde das nicht zuviel des Guten sein ....

Answer 1

jQlite (Angulars "jQuery" -Port) unterstützt keine Suche nach Klassen.

Eine Lösung wäre, jQuery in Ihre App aufzunehmen.

Ein anderer wird mit QuerySelector oder QuerySelectorAll:

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

Wir verwenden das erste Element in der element Array, das das HTML-Element ist. element.eq(0) würde das gleiche ergeben.

FIDDLE

Answer 2

In Ihrem Link-Funktion, dies tun:

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

Auch in Ihrem Link-Funktion, don Benennen Sie Ihre scope Variable mit einem $. Dies ist eine eckige Konvention, die speziell für eckige Services entwickelt wurde und nicht für Ihre eigenen Variablen verwendet werden soll.