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.

Community · Accepted Answer · 2017-05-23 12:02:14Z

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.

Jakob Jingleheimer · Accepted Answer · 2013-03-07 22:30:33Z

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 7, 2013 at 22:30

Jakob Jingleheimer

31.7k27 gold badges81 silver badges127 bronze badges

answered Mar 7, 2013 at 20:02

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

3 Comments

Ben Lesh Over a year ago

+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 Over a year ago

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 Over a year ago

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

Collectives™ on Stack Overflow

AngularJS DOM selector

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related