在AngularJS指令中查找子元素

我在一个指令工作，我有问题，使用参数element通过类名称find它的孩子。

 .directive("ngScrollList", function(){ return { restrict: 'AE', link: function($scope, element, attrs, controller) { var scrollable = element.find('div.list-scrollable'); ... } }; }) 

我可以通过标签名称find它，但无法通过类名称find它，因为我可以在控制台中看到：

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

这是做这种事情的正确方法？ 我知道我可以添加jQuery，但我想知道如果这不是一个矫枉过正的….

Answer 1

jQlite（angular的“jQuery”端口）不支持通过类查找。

一个解决scheme是将jQuery包含在您的应用程序中。

另一个是使用QuerySelector或QuerySelectorAll ：

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

我们使用element数组中的第一个element ，它是HTML元素。 element.eq(0)会产生相同的结果。

小提琴

Answer 2

在你的链接function，这样做：

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

另外，在你的链接函数中，不要使用$来命名你的scopevariables。 这是一个特定于angular度服务的angular度约定，并不是您想要用于自己的variables的东西。