Animation in AngularJS Direktive, Ereignis nicht feuernd

Question

Ich versuche, etwas nach einem "Enter" -Ereignis in einer Direktive zu tun. Das Ereignis wird nicht ausgelöst, wenn die Vorlage in geladen wird.

Hier ist die App Erklärung

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

Zunächst bin ich die Routing-Provider mir eine Vorlage Seite zu geben. Ich versuche dann, eine Direktive innerhalb dieser Vorlagen zu verwenden, um eine andere Ansicht bereitzustellen. Dies funktioniert, indem Sie die folgend in meiner Vorlage Seite

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

Dies lädt in der folgenden Richtlinie

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

Das Konsolenprotokoll nicht läuft und ich kann nur davon ausgehen, dass, weil es nicht feuert das $animate.on Ereignis.

Macht Winkel die Klasse ng-enter auf eine templateUrl in einer Direktive?

Ich bin ziemlich neu zu eckig also wenn dies der falsche Weg ist, dies zu tun, würde eine Alternative auch wirklich helfen.

Answer 1

Die $ animate-Abhängigkeit wird nicht in die Direktive übernommen.

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

     ); 

     } 

    }; 
    }]); 

Answer 2

ich sehe, dass Sie einen Controller verwenden. Kannst du das Event dort nicht erstellen? Ich habe meinen Code überprüft und habe dieses Snippet auf dem Controller, um ein Intervall zu zerstören, wenn sich die Route ändert. Beachten Sie, dass ich $ on und '$ destroy' mit $ verwende. kann es das sein?