My custom directives use jQuery for animation effects because I find angular's built-in ngShow/ngHide to be functional but not visually appealing. I vaguely remember reading in the documentation that Angular has its own DOM selector, something like angular.export() or angular.select(), which is recommended over using $(SELECTOR). However, I am struggling to locate this information now.
This is how I have implemented it:
//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 believe that by only retrieving information about $('#'+newValue) and not manipulating it directly, I am not violating any Angular principles.