Angularjs: ng-Klasse und CSS-Animationen (läuft nur einmal)

Question

Ich bin ein AngularJS-Neuling, also bitte etwas Geduld.

Zuerst der Code. Hier ist der relevante Teil .html:

<span ng-class="{'error-text': true, 'animated-error': vm.email_error}" ng-show="vm.email_error" translate>EMAIL_ERROR</span> 

Der .scss Teil:

.error-text{ 
     position: absolute; 
     &.animated-error{ 
     animation: bigandnormal 2s; 
     } 
    } 

und es gibt eine Js, die nach einem Klick wird modifizierenden vm.email_error:

var validateEmail = function(){ 
    var isEmailValid = /(.+)@(.+){2,}\.(.+){2,}/.test(vm.email); 
    vm.email_error = !isEmailValid; 
    return isEmailValid; 
}; 

A Durch Klicken auf die Schaltfläche wird die Funktion validateEmail() ausgeführt. Was passiert hier ist, dass, wenn ich den ersten Klick (mit einer ungültigen E-Mail) die Klasse korrekt zum Span hinzugefügt und die Animation ausgeführt wird.

Aber wenn ich noch einmal klicke, wird die Animation NICHT erneut ausgeführt. Mit Blick auf den Inspektor scheint es, dass die Klasse nie wieder hinzugefügt wurde. Ich habe sogar versucht, vm.email_error-false in der ersten Zeile der validateEmail() Funktion zum Zurücksetzen und entfernt die animated-error von der Konsole, bevor er wieder klicken:

angular.element(".error-text").each(function(index, el) { 
    angular.element(el).removeClass('animated-error'); 
}); 

Aber ich kann nicht mehr die Animation und die Klasse sehen.

Aber auf jeden Fall glaube ich nicht, dass ich es nicht richtig mache, es sollte einen Weg geben, dies zu erreichen. Diese

ist das, was ich Sie bitte :)

Vielen Dank im Voraus.

UPDATE: I wenn vm.email_error = !isEmailValid; in einem setTimeout setzen, funktioniert es richtig. Es wäre großartig, eine Erklärung von jemandem zu haben, der diese Technologie kennt. Natürlich ist klar, dass dies nicht die wirkliche Lösung sein kann.

Answer 1

Versuchen Sie, Ihre email_error-Variable als $ scope- oder $ rootScope-Variable und nicht als Controller-Variable zu deklarieren.

var validateEmail = function(){ 
    var isEmailValid = /(.+)@(.+){2,}\.(.+){2,}/.test(vm.email); 
    $scope.email_error = !isEmailValid; // or $rootScope.email_error = !isEmailValid; 
    return isEmailValid; 
}; 

Und Sie brauchen die Anführungszeichen um Ihren css-Klassennamen nicht.

nennen es dann in Ihrem HTML ohne Präfixe, wie folgt aus:

<span ng-class="{error-text: true, animated-error: email_error}" ng-show="email_error" translate='EMAIL_ERROR'></span> 

Achten Sie auch darauf, wie Winkel verwenden übersetzen:

1. Wenn Sie es als eine Richtlinie verwenden zu können, schreiben müssen es als

   <p translate='MY_TRAD'></p> 
   

2. Wenn Sie es als Filter verwenden, dann ist es

   <p>{{ 'MY_TRAD' | translate }}</p> 
   

(Winkel doc übersetzen: https://github.com/angular-translate/angular-translate)