Анимация в директиве AngularJS, мероприятие не обстреливает

Я пытаюсь сделать что-то после события 'enter' в директиве. Событие не срабатывает при загрузке шаблона.

Вот объявление приложения

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: '/'
      });
  });

Первоначально я использую поставщика маршрутизации, чтобы дать мне страницу шаблона. Затем я пытаюсь использовать директиву внутри этих шаблонов, чтобы предоставить другое представление. Это работает, используя следующее на моей странице шаблона

<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>

Это загружается в следующую директиву

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');
           }
        );
       }
     };
   });

Журнал консоли не запущен, и я могу только предположить, что это потому, что он не запускает событие $animate.on.

Использует ли angular класс ng-enter для templateUrl в директиве?

Я новичок в angular, поэтому, если это неправильный способ сделать это, альтернатива также поможет.

Ответ 1

Зависимость $animate не втягивается в директиву.

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');
           }

        );

      }

     };
   }]);

Ответ 2

Я вижу, что вы используете контроллер. Вы не можете создать там событие? Я проверил свой код и получил этот фрагмент на контроллере, чтобы уничтожить интервал при изменении маршрута, обратите внимание, что я использую $on и '$ destroy', с $. может ли это быть?

$scope.$on('$destroy', function () {
                    $interval.cancel($scope.interval);
                });