AngularJS DOM selector

Question

I've got a few custom directives that use jQuery for animation effects (angular's built-in ngShow/ngHide and the like are functional, but not pretty). I think I remember reading in the documentation somewhere that angular has its own DOM selector (something like angular.export() or angular.select()) that I should use instead of $(SELECTOR); however I can't find it now.

I'm doing something like this:

//view
<div scroll-to="element"> //`element` is set via ng-click
  …
</div>

//directive
link: function(scope, elm, attrs)
{

  scope.$watch(attrs.scrollTo, function scrollToAction(newValue,oldValue)
  {
    if ( newValue !== oldValue )
    {
      elm.animate({
        scrollTop:
          $('#'+newValue).offset().top //replace jquery selector with angular's
          - elm.offset().top
          + elm.scrollTop()
      });
    }
  });

}

I'm not really manipulating $('#'+newValue), just retrieving info about it, so I don't think I'm committing a crime against Angular.

score 39 · Answer 1 · edited May 23 '17 at 12:02

As the official AngularJs doc says

All element references in Angular are always wrapped with jQuery or jqLite (such as the element argument in a directive's compile / link function). They are never raw DOM references.

In details: if you include jQuery before your Angular reference, the angular.element() function becomes an alias for jQuery (it's otherwise jqLite, see Mark Rajcok's answer).

You can check in the Dev Tool debugger if you are getting jQuery or jqLite by placing a breakpoint at the line where you call angular.element(). When hovering it, you will be prompted for the relevant library, see screenshot below (in my case, I get jQuery).

As the official AngularJs doc says

For lookups by tag name, try instead angular.element(document).find(...) or $document.find()

In other words: if you get jQuery when calling angular.element(), then anything like angular.element('#foo > bar') works if that's what you're thinking of.

If you're wondering how to get this selector feature without jQuery, then you may want to use Sizzlejs. Sizzle is the selector library that jQuery uses under the hood.

score 36 · Accepted Answer · edited Mar 07 '13 at 22:30

36

"jqLite" (defined on the angular.element page) provides DOM traversal methods like children(), parent(), contents(), find(), next() (but not previous()). There is no selector-like method.

You might want to try JavaScript's querySelector.

edited Mar 07 '13 at 22:30

Jakob Jingleheimer

30,952
27
76
126

answered Mar 07 '13 at 20:02

Mark Rajcok

362,217
114
495
492

+1 I've also added additional information that might explain why the OP feels he's seen an angular method that you could select elements with. – Ben Lesh Mar 07 '13 at 20:15
Ah thanks, yes that's exactly it. I do include jquery before angular, so is `angular.element()` still preferable? It seems like it would just add extra overhead of resolving the alias. – Jakob Jingleheimer Mar 07 '13 at 22:11
4

@jacob, I would use `angular.element()` so that if in the future your code no longer needs jQuery, you won't have to update it. – Mark Rajcok Mar 07 '13 at 23:00

AngularJS DOM selector

2 Answers2

Linked