Question

角度动画有问题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;
}

感谢您对此的任何帮助

Answer 1

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

此案例的含义导致在 $animate.enter()之后链接。您可以将此调用包装为超时，但这不是一个可持续的解决方案，因为此时间取决于浏览器的繁忙程度以及是否第一次链接此应用程序的指令。所以我只看到一种基于承诺的方法。由于自定义指令已经采用范围注入，后者可以解决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

$ animate.enter（）不使用自定义指令

1 个答案: