4

Using Angular 1.5.3, is it possible to globally disable ng-animate and then selectively enable it on some elements?

I have a directive (ng-animate-enabled) used to enable ng-animate on the container div and it's children.

If I globally disable ng-animate in the controller via $animate.enabled(false), the animations no longer work even though I am specifically enabling them via the directive mentioned above.

This jsfiddle illustrates the problem.

Thanks!

rmirro
  • 61
  • 5

1 Answers1

7

The easiest way to do this is to use $animateProvider.classNameFilter(). This lets you selectively enable ngAnimate for certain elements based on a HTML class (or more specifically, a regular expressions that is checked against the class). This eliminates the need to have a specific directive for enabling ngAnimate, and can give your application a significant performance boost. In your case, I'd do:

// Note that that the function takes a regular expression, not a string!
// Don't put quotes around it, use forward slashes!
$animateProvider.classNameFilter(/ng-animate-enabled/);

Which would enable ngAnimate for any elements with the ng-animate-enabled class.

For more information, I'd recommend reading Ben Nadel's blog post on the topic.

Joe Clay
  • 33,401
  • 4
  • 85
  • 85
  • Thanks Joe! I just read Ben's article and he confirmed my question so I removed it (before you answered). Also, the first comment to [this response](http://stackoverflow.com/a/21251562/3722775) seems to clarify that my original approach above isn't possible. – rmirro May 23 '16 at 18:47
  • @rmirro: Glad it helped you! – Joe Clay May 23 '16 at 18:48