在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,但我想知道这是不是一个矫枉过正....

Answer 1

jQlite(angular的"jQuery"端口)不支持按类查找.

一种解决方案是在您的应用中包含jQuery.

另一个是使用QuerySelector或QuerySelectorAll:

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

我们使用element数组中的第一项,即HTML元素.element.eq(0)会产生相同的.

小提琴

Answer 2

在您的链接功能中,执行以下操作:

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

此外,在链接函数中,不要scope使用a 命名变量$.这是一个特定于内置角度服务的角度约定,并不是您想要用于自己的变量的东西.