AngularJS动画指令链

Question

我目前正在学习AngularJS并尝试创建两个指令。 这些指令允许我分别为图像设置动画： rollImageIn将图像的大小调整为0到300px rollImageOut将图像从300px调整为0px。

我希望在第一个指令完成时触发第二个指令。

这是我的指示： https://gist.github.com/egavard/f9cd6b6faf140fb77f130c4ca98cc1be

这是我的模板： https://gist.github.com/egavard/923cc37b0240baaa2d5a1ff5608e10d4

我能够通过在第一个动画回调中粘贴第二个动画来解决这个问题，但我想创建简单且可重复使用的指令。

有人知道我错了什么吗？

Answer 1

我在这里发现了一些错误：

• 首先，无效的$ compile调用：

$compile(element)(scope)

• 然后，doc建议使用.done（）回调而不是then（）。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

它现在正常工作。