AngularJS DOM selector | 易学教程

问题

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.

回答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.

回答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.

来源：https://stackoverflow.com/questions/15280463/angularjs-dom-selector

标签

javascript

jquery-selectors

angularjs

angularjs-directive