在AngularJS指令中查找子元素

Question

我正在编写一个指令，使用参数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，但我想知道那样是否会过度设计...

- vtortola

---

不确定这个链接是否有帮助？ - Pete

Answer 1

jQlite（Angular的“jQuery”端口）不支持按类查找。

一种解决方案是在应用程序中包含jQuery。

另一种解决方案是使用QuerySelector或QuerySelectorAll：

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

我们使用数组中的第一个元素，即HTML元素element。使用element.eq(0)也会得到相同的结果。 FIDDLE

- Mosho

---

不要忘记使用.querySelectorAll()（用于多选）。 - S Panfilov

Answer 2

在你的链接函数中，执行以下操作：

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

此外，在您的链接函数中，不要使用$来命名您的scope变量。这是一种 Angular 约定，仅适用于内置的 Angular 服务，并不适用于您自己的变量。

- pje