AngularJS анимационная директива chain

Question

В настоящее время я изучаю AngularJS и пытаюсь создать две директивы. Эти директивы позволяют мне анимировать изображения, соответственно: rollImageIn изменяет размер изображения от 0 до 300 пикселей rollImageOut изменяет размер изображения с 300 пикселей до 0 пикселей.

Я хотел бы запустить вторую директиву, когда первая будет завершена.

Вот мои директивы: https://gist.github.com/egavard/f9cd6b6faf140fb77f130c4ca98cc1be

А вот мой шаблон: https://gist.github.com/egavard/923cc37b0240baaa2d5a1ff5608e10d4

Я был в состоянии перейти на эту проблему вставив второй анимации в первой анимации обратного вызова, но я хотел бы создать простой и многоразовые директивы.

Есть ли у кого-то представление о том, что я ошибся?

Answer 1

Я нашел некоторые ошибки здесь:

• Прежде всего, недопустимый $ компиляции вызова:

$compile(element)(scope)

• Затем ДоП recommands использовать .done() обратный вызов вместо then().

.done(function(){ 
 
    element.attr('roll-image-out', '{duration:'+rollOutDuration+', delay: '+rollOutDelay+', nextStep: '+nextStep+'}'); 
 
    element.removeAttr('roll-image-in'); 
 
    $compile(element)(scope); 
 
    });

Это теперь работает правильно.