CODEWITHSUNDEEP
javascriptangularjs
madhur
madhur

Reputation: 1001

Using $document.querySelectorAll in angularjs

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?

Upvotes: 1

Views: 19524

Answers (4)

Rabin Naga
Rabin Naga

Reputation: 31

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

Upvotes: 0

madhur
madhur

Reputation: 1001

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

$document.find('tagName.className')

Upvotes: 1

e-shfiyut
e-shfiyut

Reputation: 3675

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 */);

Upvotes: 2

wpcarro
wpcarro

Reputation: 1546

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.

Upvotes: 0

Related Questions