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)会产生相同的效果。

FIDDLE

Answer 2

在您的链接功能中，执行以下操作：

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

此外，在您的链接功能中，请勿使用scope为$变量命名。这是一个特定于内置角度服务的角度约定，并不是您想要用于自己的变量的东西。

在AngularJS指令中查找子元素

2 个答案: