Найти дочерний элемент в директиве AngularJS

Я работаю в директиве, и у меня возникают проблемы с использованием параметра element, чтобы найти его дочерние элементы по имени класса.

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

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

            ...
        }
      };
})

Я могу найти его по имени тега, но он не может найти его по имени класса, как я могу видеть на консоли:

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

Какой был бы правильный способ сделать такое? Я знаю, что могу добавить jQuery, но мне было интересно, не будет ли это лишним...

Ответ 1

jQlite (angular "jQuery" порт) не поддерживает поиск по классам.

Одним из решений будет включение jQuery в ваше приложение.

Другой использует QuerySelector или QuerySelectorAll:

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

Мы используем первый элемент в массиве element, который является элементом HTML. element.eq(0) даст то же самое.

FIDDLE

Ответ 2

В вашей функции ссылок сделайте следующее:

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

Кроме того, в вашей функции ссылок не называйте переменную scope, используя $. Это соглашение angular, которое является специфичным для встроенных служб angular и не является тем, что вы хотите использовать для своих собственных переменных.