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?
4 Answers
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 */);
4 Comments
wpcarro
If the OP is interested in using
querySelectorAll, or any method from the DOM API, then injecting the $document is unnecessary. It's a method on the globally available document object. This is just vanilla javascript. Injecting $document and then extracting document from it is an unnecessary step. I would suggest instead that the OP used a jQuery lite method if he or she is injecting the $document. Otherwise stick to plain old document.
e-shfiyut
good point. this is also an option. but jqLite
find() is available only by tag name. in order to search by id or by class DOM API should be used.wpcarro
What makes you think you can only query by tag name? See docs on
find(..). Any valid CSS selector should work.e-shfiyut
you are looking at the wrong docs. on jqLite (which is not jQuery) only search by tag is available using
find(), see the docs: docs.angularjs.org/api/ng/function/angular.elementSolved the problem by using jqlite .find() method in angular.
$document.find('tagName.className')
2 Comments
Parzh
This won't work with ".className" by design. You can find the corresponding note on official angular.element api reference page
madhur
its 'tagName.className', so it still search for tag, which the documentation also says. I have used this in my code and works fine
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.
2 Comments
wpcarro
My intention was never to provide a cross-browser solution. It was to solve why
querySelectorAll was undefined on the $document object. And fyi, It works on many browsers.
runderworld
Best not to give this advice, because it's not a best practice in AngularJS. From the docs: "In AngularJS we always refer to it through the $window service, so it may be overridden, removed or mocked for testing." The same goes for referring to
document, as it may not be defined in mocked test environments. So that means it should be accessed either via $window.document.querySelectorAll or via $document[0].querySelectorAll.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
$document[0].querySelectorAll