Find child element in AngularJS directive

Question

I am working in a directive and I am having problems using the parameter element to find its childs by class name.

.directive("ngScrollList", function(){
    return {
        restrict: 'AE',
        link: function($scope, element, attrs, controller) {

            var scrollable = element.find('div.list-scrollable');

            ...
        }
      };
})

I can find it by the tag name but it fails to find it by class name as I can see in the console:

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

Which would be the right way of doing such thing? I know I can add jQuery, but I was wondering if wouldn't that be an overkill....

Not sure if this helps?

Pete
– Pete

2014-07-07 21:35:43 +00:00
Commented Jul 7, 2014 at 21:35 — Pete
– Pete, Commented Jul 7, 2014 at 21:35

Mosho · Accepted Answer · 2015-06-05 23:05:34Z

107

jQlite (angular's "jQuery" port) doesn't support lookup by classes.

One solution would be to include jQuery in your app.

Another is using QuerySelector or QuerySelectorAll:

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

We use the first item in the element array, which is the HTML element. element.eq(0) would yield the same.

FIDDLE

edited Jun 5, 2015 at 23:05

answered Jul 7, 2014 at 21:43

Mosho

7,0783 gold badges36 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

S Panfilov Over a year ago

Don't forget about .querySelectorAll() (for multiple select)

tomexx · Accepted Answer · 2015-08-28 10:13:50Z

31

In your link function, do this:

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

Also, in your link function, don't name your scope variable using a $. That is an angular convention that is specific to built in angular services, and is not something that you want to use for your own variables.

edited Aug 28, 2015 at 10:13

tomexx

2,3492 gold badges22 silver badges34 bronze badges

answered Jul 7, 2014 at 21:39

pje

2,4681 gold badge26 silver badges26 bronze badges

Collectives™ on Stack Overflow

Find child element in AngularJS directive

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related