AngularJS指令中的动画,事件未触发

Question

我正试图在指令中的'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指令中？

我对角度很新,所以如果这是错误的做法,另一种选择也会有所帮助.

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

        );

      }

     };
   }]);