ngAnimate in custom directives

[Dru Kepple]

I'm trying to incorporate the $animate service into my own directive.  I can't get enter and leave to actually animate.

The weird thing is that using $animate.enter, the element is appended to the DOM, and the callback function fires.  But it seems as though the ng-animate, ng-enter, and ng-enter-active classes ever get added.  The element is simply appended to the DOM without animation.  The callback function fires, but it fires instantly and not after the duration of the animation that's supposed to happen.  The same thing happens with leave; the element is removed from the DOM instantly, and the callback fires instantly; no animation.

I'm rather new to Angular and I figure I'm just missing something, so apologies if this is a crazy stupid question.

I am able to use $animate.addClass and $animate.removeClass without problem, which is helpful, and suggests that I'm on the right track, but enter and leave are giving me problems.

I put my example on Punker:

http://plnkr.co/edit/XtvZAZzgA8ORZBaRN68d?p=preview

[Dru Kepple]

There were a few things wrong with my example.  First, I wasn't adding ngAnimate as a dependency.  Second, since I was trigger the animation in an .on('click'), I needed to use scope.$apply.