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.
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)... so angular.element('#foo > bar') would work. That may be what you're thinking of. There is no other way to select elements like that without JQuery, other than document.querySelectorAll(), which will select DOMElements, you'd then have to wrap with angular.element().
"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.