As $document is wrapper for angular.element(window.document), ideally $document.querySelectorAll() should work, but I am getting an error saying it is not a function. Can somebody explain?

As $document is wrapper for angular.element(window.document), ideally $document.querySelectorAll() should work, but I am getting an error saying it is not a function. Can somebody explain?

• javascript
• angularjs

• 1 jqLite object don't get values that wrapped object have to get querySelectorAll working you will need to use $document[0].querySelectorAll – jcubic Commented Sep 22, 2016 at 14:12

4 Answers 4

If you want to use $document, you should inject it (you can use any other way to inject it):

     angular.module('someModule', [])
         // instead of 'controller' use whatever it is...
         .controller ('SomeName', ['$document', function($document) { 
             // ...
         }]);

Then you can use query selector (notice the use of [0]):

$document[0].querySelectorAll(/* whatever */);

Solved the problem by using jqlite .find() method in angular.

$document.find('tagName.className')

You should just be able to use...

document.querySelectorAll(..)

Omit the $ because you don't need jQuery lite since you're just using the DOM API. Otherwise use a jQuery lite method... this link seems pertinent.

You will have to use angular.element(document.querySelector().jqLiteMethods());

For example

angular.element(document.querySelector('#dis-caret-drop')).find('.caret').css({'opacity' : 0.4});

This would select the element with id 'dis-caret-drop' and search for the child element with class 'caret' and change the opacity of the child element to 0.4