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.

Solution 1

"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.

Solution 2

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.

Comments

[Ben Lesh]

+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.

[Jakob Jingleheimer]

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.

[Mark Rajcok]

@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.