$animate.enter() 不适用于自定义指令答案

【问题标题】：$animate.enter() is not working with custom directive$animate.enter() 不适用于自定义指令
【发布时间】：2015-10-23 08:36:43
【问题描述】：

angular-animate 1.4.3 出现问题...指令的离开动画效果很好，但进入动画效果不行；据我所见，ng-enter 和 ng-enter-active 类并未应用于该元素。为什么是这样？ Here's a plunkr of it

script.js

(function() {
  'use strict';

  // ---------------Module----------------

  angular.module('app', ['ngAnimate'])
    .run(['fooService', function(fooService) {
      fooService.foo('Hello World!');
    }]);

  // --------------Service----------------

  function fooService($rootScope, $compile, $animate, $timeout) {

    function createDirective(message) {
      var newFoo = {
        scope: $rootScope.$new()
      };

      var target = angular.element(document.querySelector('#bar'));
      var elem = angular.element(document.createElement('foo'));

      newFoo.scope.message = message;

      newFoo.elem = $compile(elem)(newFoo.scope);

      $animate.enter(newFoo.elem, target).then(function() {
        $timeout(function() {
          removeDirective(newFoo);
        }, 3000);
      });
    }

    function removeDirective(foo) {
      $animate.leave(foo.elem).then(function() {
        foo.scope.$destroy();
      });
    }


    function foo(message, overrides) {
      return createDirective(message);
    }

    return {
      foo: foo
    };
  }

  fooService.$inject = ['$rootScope', '$compile', '$animate', '$timeout'];

  angular.module('app')
    .factory('fooService', fooService);

  // -------------Directive---------------

  function fooDirective() {
    return {
      restrict: 'AE',
      replace: true,
      templateUrl: 'foo.html',
      link: function(scope) {
      }
    }
  }

  angular.module('app')
    .directive('foo', fooDirective);

}());

foo.html

<div class="alert alert-success">
  {{message}}
</div>

index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@~1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script data-require="angular-animate@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div id="bar"></div>
  </body>

</html>

style.css

.ng-leave, .ng-enter {
  transition: all 1s ease-out;
}

.ng-enter.ng-enter-active, .ng-leave {
  opacity: 1;
}

.ng-enter, .ng-leave.ng-leave-active {
  opacity: 0;
}

感谢任何帮助

【问题讨论】：

标签： javascript css angularjs ng-animate

【解决方案1】：

Angular 不会在编译时链接指令。你可以阅读一些关于这个here的内容。

此案例的含义导致链接之后 $animate.enter()。您可以将此调用包装成一个超时，但这不是一个可持续的解决方案，因为这个时间取决于浏览器的繁忙程度以及它是否是第一次为这个应用程序链接指令。所以我只看到了一种基于 Promise 的方法。由于自定义指令的作用域注入已经到位，后者可以解析fooService提供的承诺

  newFoo.scope.deferred = $q.defer();
  newFoo.scope.deferred.promise.then(function(){
    console.log('$animate.enter');
    $animate.enter(newFoo.elem, target).then(function() {
      console.log('$animate.entered');
      $timeout(function() {
        removeDirective(newFoo);
      }, 3000);
    });
  });

并且在指令中，承诺应该在链接上解决

  link: function(scope) {
    console.log('foo.link');
    scope.deferred.resolve();
  }

Updated Plunker

【讨论】：

啊好吧，我会更详细地阅读这篇文章，但我有点明白......非常感谢！这真的很有帮助