Trova elemento figlio nella direttiva AngularJS

Question

Sto lavorando in una direttiva e sto riscontrando problemi nell'utilizzare il parametro element per trovare i suoi child in base al nome della classe.

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

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

      ... 
     } 
     }; 
}) 

posso trovarlo dal nome del tag, ma non riesce a trovarlo per nome classe come posso vedere nella console:

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

Quale sarebbe il modo giusto di fare cosa del genere? So che posso aggiungere jQuery, ma mi chiedevo se non che essere un eccessivo ....

Answer 1

jQlite (la "porta jQuery" di angolare) non supporta la ricerca per classi.

Una soluzione sarebbe includere jQuery nell'app.

altro sta utilizzando QuerySelector o QuerySelectorAll:

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

Usiamo il primo elemento element matrice, che è l'elemento HTML. element.eq(0) darebbe lo stesso.

FIDDLE

Answer 2

Nella funzione di collegamento, fare questo:

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

Inoltre, nella vostra funzione di collegamento, don 'Denominare la variabile scope utilizzando uno $. Questa è una convenzione angolare specifica per i servizi angolari incorporati e non è qualcosa che si desidera utilizzare per le proprie variabili.