1

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?

e-shfiyut
  • 3,538
  • 2
  • 30
  • 31
madhur
  • 973
  • 1
  • 14
  • 23
  • 1
    jqLite object don't get values that wrapped object have to get querySelectorAll working you will need to use `$document[0].querySelectorAll` – jcubic Sep 22 '16 at 14:12

4 Answers4

2

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 */);
e-shfiyut
  • 3,538
  • 2
  • 30
  • 31
  • 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`. – wpcarro Sep 22 '16 at 14:35
  • 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. – e-shfiyut Sep 22 '16 at 14:40
  • What makes you think you can only query by tag name? [See docs on `find(..)`](https://api.jquery.com/find/). Any valid CSS selector should work. – wpcarro Sep 22 '16 at 14:42
  • 4
    you are looking at the wrong docs. on jqLite (which is not jQuery) only search by tag is available using `find()`, see the docs: https://docs.angularjs.org/api/ng/function/angular.element – e-shfiyut Sep 22 '16 at 14:43
1

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

$document.find('tagName.className')
madhur
  • 973
  • 1
  • 14
  • 23
  • 1
    This won't work with ".className" by design. You can find the corresponding note on [official angular.element api reference page](https://docs.angularjs.org/api/ng/function/angular.element) – Parzh from Ukraine May 19 '17 at 07:53
  • its 'tagName.className', so it still search for tag, which the documentation also says. I have used this in my code and works fine – madhur May 22 '17 at 10:20
0

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.

Community
  • 1
  • 1
wpcarro
  • 1,528
  • 10
  • 13
  • 1
    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](http://caniuse.com/#search=queryselectorall). – wpcarro Sep 22 '16 at 14:25
  • 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`. – runderworld Aug 01 '19 at 17:38
0

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

Rabin Naga
  • 31
  • 5