Angular animation

Question

I currently have this line of code directly in the ng-click controller

$(".message").show(300).delay(900).hide(300);

and while it works fine, they told me that I NEVER do animation / jQuery / DOM manipulation inside the controller. Is there any other way to do this that doesn't involve a ridiculous amount of rioting?

Answer 1

Write a simple directive that follows its attribute:

 app.directive('animateMe', function() { return function(scope, element, attrs) { scope.$watch(attrs.animateMe, function() { element.show(300).delay(900).hide(300); }) } }) 

Place this directive on the HTML element that you want to animate. Have ng-click to switch the model / area property.

 <a ng-click="animateToggle = !animateToggle">animate</a> <div animate-me="animateToggle">...</div> 

More code, yes. But now you have something reusable (and you don't need selectors).

Fiddle

In the script, I added ng-hide to the div so that it does not appear initially.

---

Update :
Angular 1.1.4 now has ngAnimate . Although not as flexible as writing your own animation directive, it will handle many scenarios. The ng-show (and ng-hide) directive supports show and hide animation methods.

Answer 2

I suggest you use the new ngAnimate directive introduced in the core of AngularJS 1.1.4.

More here