Найти дочерний элемент в директиве 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, но мне было интересно, не будет ли это излишним....

2 58
javascript angularjs angularjs-directive

2 ответа:

jqlite (угловой порт "jQuery") не поддерживает поиск по классам.

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

другое, используя QuerySelector или QuerySelectorAll:

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

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

скрипка

102

в вашей функции ссылки, сделайте это:

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

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

27