Animation in AngularJS Directive, event not firing

Question

I'm trying to do something after an 'enter' event in a directive. The event isn't firing when the template is loaded in.

Here is the app declaration

angular
  .module('MyApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeCtrl'
      })
      .when('/in-the-community', {
        templateUrl: 'views/in-the-community.html',
        controller: 'CommunityCtrl'
      })
       .otherwise({
        redirectTo: '/'
      });
  });

Initially I am using the routing provider to give me a template page. I am then trying to use a directive inside these templates to provide another view. This works by using the following in my template page

<div class="flex">
    <div class="fc fci image-wrapper" id="home-banner">
    </div>

    <div class="fc fcc">
        <section show-and-hide-content="{{ sub_content }}">
        </section>
    </div>
</div>

This loads in the following directive

angular.module('rubisApp')
  .directive('showAndHideContent', function ($animate) {
    return {
      templateUrl: 'views/community-sub.html',
      controller: 'CommunitySubCtrl',
      link: function(scope, element, attributes) {
        $animate.on('enter', element,
           function callback(element, phase) {
             console.log('attributes.showAndHideContent');
           }
        );
       }
     };
   });

The console log isn't running and I can only presume that is because it isn't firing the $animate.on event.

Does angular apply the ng-enter class to a templateUrl in a directive?

I'm pretty new to angular so if this is the wrong way of doing this, an alternative would really help also.

Answer 1

The $animate dependency as not being pulled into the directive.

angular.module('MyApp')
  .directive('showAndHideContent',['$animate', function ($animate) {
    return {
      templateUrl: 'views/community-sub.html',
      controller: 'CommunitySubCtrl',
      link: function(scope, element, attributes) {
        $animate.on('enter', element,
           function callback(element, phase) {
             console.log('attributes.showAndHideContent');
           }

        );

      }

     };
   }]);