getting angular element using nested classes

Question

In my angularjs application on ng-click on a button, I have

$scope.getItems = function() {
    var matchedElements = angular.element(document).find('.main_tabSet');
    console.log(matchedElements.length);
}

which is working fine.

Now there are few bootstrap classes which are injected below main_tabSet, which I am trying to access in ng-click as

 var matchedElements = angular.element(document).find('.main_tabSet .nav .nav-tabs');

but this is not returning the elements. What is the right way of accessing elements using nested classes?

`find()` is only to look up by tag names anyway not classes // id\s.. Here is the docs with your answer too.. : https://docs.angularjs.org/api/ng/function/angular.element — Pogrindis, Jan 19 '16 at 14:15
Worth noting that you can add full jquery into the page, in which case your selector should then work — Rhumborl, Jan 19 '16 at 14:26
Possible duplicate of [AngularJS: How to .find using jqLite?](http://stackoverflow.com/questions/17283697/angularjs-how-to-find-using-jqlite) — Rhumborl, Jan 19 '16 at 14:30

score 2 · Answer 1 · edited May 23 '17 at 12:23

2

You want to use querySelector like so :

var matchedElements = angular.element(document.querySelector('.main_tabSet .nav .nav-tabs'));

From their own docs on find() : f

find() - Limited to lookups by tag name

And very much related question :

AngularJS: How to .find using jqLite?

edited May 23 '17 at 12:23

Community

answered Jan 19 '16 at 14:21

Pogrindis

1 Answers1