$ animate.enter() не работает с настраиваемой директивой

с проблемами с угловым анимацией 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="[email protected]" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
    <script data-require="[email protected]~1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> 
    <script data-require="[email protected]" 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; 
}

Оцените справку по этому

источник

2015-07-31 John

Угловое не связывает директивы по компиляции. Вы можете немного прочитать об этом 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

источник

2015-08-02 19:06:09

А, я прочитаю статью более подробно, но я понимаю ... большое спасибо! это действительно помогает – John

$ animate.enter() не работает с настраиваемой директивой

ответ

Смежные вопросы