Corner JS DOM / document selection without jQuery

Question

AngularJS does not have a built-in DOM selection mechanism, but it provides utilities that handle some of what jQuery will provide for a typical application.

However, choosing the DOM is still king, and I'm trying to save jQuery from my application for the sole purpose of choosing the DOM.

Angular provides the $ document service as an injection. I find this cumbersome. For example, to get the original DOM selections using $ document, you would need to insert $ document in all the required directives and call querySelectorAll, and then expand it with Angular:

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

This is silly.

In the meantime, I provided myself with a global helper, but it does not use Angular 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 for global and global globules for protection and verification. Is there a clean way that I can use querySelectAll without passing $ document to each directive? Can I extend the angular. Element in the same way as jQuery, but uses querySelectorAll?

Edit:

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

However, the AngularJS implementation does not support selectors and does not mention this omission of this function - http://docs.angularjs.org/api/angular.element

Instead, AngularJS does:

 throw Error('selectors not implemented'); 

^ when the element passed in angular.element is a string that does not start with '<'.

It would be nice if it were:

 return document.querySelectorAll( element ) 

... with some basic logic to prevent errors.

Answer 1

$document - wrapper, true. Perhaps one of the authors of Angular could confirm this, but I think that it was not intended for introduction to directives. Also there is no $window . Its only for rare conditions and cases when you need to deal with $window or $document in Controller or Service .

When you are in the directive, the DOM is assumed. Therefore, feel free to use document or window if you want.

Angular way is developed, you do not need complex selectors. If you make difficult choices (even inside directives), there may be an easier way to do this. Note that the directive gives you direct access to the element to which it is attached. Now you should basically relate to the elements around your element, perhaps to elements that look like siblings or direct children. If you are looking for nodes that are located somewhere else, then this is the first sign of "smell."

If you could tell us what you are trying to achieve, then someone can offer you a solution that upsets things perfectly.