AngularJS animation directive Kette

Question

Ich lerne gerade AngularJS und versuche, zwei Direktiven zu erstellen. Mit diesen Anweisungen kann ich Bilder animieren: rollImageIn passt die Größe des Bildes von 0 bis 300px an rollImageOut ändert die Größe des Bildes von 300px auf 0px.

Ich möchte die zweite Direktive auslösen, wenn die erste abgeschlossen ist.

Hier sind meine Richtlinien: https://gist.github.com/egavard/f9cd6b6faf140fb77f130c4ca98cc1be

Und hier ist meine Vorlage: https://gist.github.com/egavard/923cc37b0240baaa2d5a1ff5608e10d4

ich in der Lage war, durch Einfügen der zweite Animation in dem ersten Animation Rückruf über dieses Problem zu gehen, aber ich mag einfach erstellen und wiederverwendbare Direktiven.

Hat jemand eine Idee von dem, was ich falsch verstanden habe?

Answer 1

Ich fand hier einige Fehler:

• Zu allererst Aufruf ungültig $ Kompilierung:

$compile(element)(scope)

• die doc empfiehlt Ihnen dann DONE() zu verwenden Rückruf anstelle von dann().

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

Es funktioniert nun korrekt.