AngularJS DOM / document selections without jQuery

Question

AngularJS doesn't have a built in DOM selection engine yet provides utility methods that handle a portion of what jQuery would provide for a typical application.

However, DOM selection is still king and I'm trying to keep jQuery out of my application for the sole purpose of DOM selections.

Angular provides a $document service as an injectable. I find this to be cumbersome. For example, to achieve native DOM selections using $document you would need to inject $document into all directives desired and call querySelectorAll, then extend it with Angular:

angular.element( $document[0].querySelectorAll('#element') )

This is silly.

In there interim I've provided myself a global helper, but it doesn't use Angular's wrapped $document...

  // Create a shortcut to querySelectorAll
  window.query = function(selector) {
    return document.querySelectorAll( selector )
  }

  // For use inside a directive like so...
  angular.element( query('#element') )

AngularJS is ALLERGIC to globals and wraps globals for protection and testability. Is there a clean way I can leverage querySelectAll without passing $document into every directive? Can I extend angular.element in the same fashion jQuery does but utilize querySelectorAll?

Edit:

I also want to note the original JQLite library supports basic selectors https://code.google.com/p/jqlite/wiki/UsingJQLite#Supported_Selectors.

The AngularJS implementation however does not support selectors nor appears to mention this feature omission - http://docs.angularjs.org/api/angular.element

Instead AngularJS does:

throw Error('selectors not implemented');

^ when the item passed to angular.element is a string which does not start with '<'.

It'd be nice if that was:

return document.querySelectorAll( element ) 

...with some basic error prevention logic.

Answer 1

$document is a wrapper, true. Maybe one of the Angular authors could confirm this, but I think it was not meant to be injected into directives. Neither is $window. Its only for the rare conditions and cases where you need to deal with $window or $document in a Controller or a Service.

When you are in a directive, the DOM is assumed. So, feel free to use document or window directly if you wish.

The way angular is designed, you dont need complex selectors. If you are doing a complex selection ( even inside directives ) there is probably a simpler way to do it. Note that the directive gives you access directly to the element to which it is attached. Now you should be concerned mostly with the elements around your element, perhaps elements that are like siblings or direct children. If you are looking for nodes that are somewhere else, then that is the first sign of a "smell".

If you could let us know what you are attempting to achieve, then someone could suggest you a solution that breaks things up nicely.