AngularJS - La réinitialisation de $ scope.value ne modifie pas la valeur du template (comportement aléatoire)

Jetez un oeil à l'exemple sur http://jsfiddle.net/2NJ7y/3/ (version de AngularJS 1.0.1). Il est simple d'application, qui est en attente pour l'entrée de nombre de la chance. Si le nombre est égal à 7, je réinitialiser le nombre de la chance à la valeur null. Si j'entre un numéro de 7 à plusieurs reprises, parfois/au hasard le nombre de la chance de rester dans le champ de saisie. Pourquoi? Comment résoudre ce problème? Merci.

source d'informationauteur user1595465

  1. 6

    J'ai fait un peu de débogage.

    Tout d'abord pour moi nombre de la chance de rester dans le champ de saisie et non pas au hasard.

    enter 3 (model==3, input==3) => enter 7 (alert, model==null, input="")

    => enter 3 (model==3, input==3) => remove 3 (model=="", input=="")

    => enter 7 (alert, model==null, input="")

    => enter 7 (alert, model==null, input="7")

    7 rester dans le champ de saisie uniquement si le modèle précédent, la valeur est null.

    Ce qui se passe: lors de la saisie de 7 tiré d'entrée de l'événement qui est géré par l' la fonction d'écouteur de entrée de la directive. Fonction d'écoute des appels $setViewValue. $setViewValue jeux de $viewValue, $model value est utilisée, la valeur de modèle et appelle $viewChangeListeners (ngChangeDirective ajoute simplement gestionnaire $viewChangeListeners). Alerte s'affiche, luckynumber est définie sur null. Après tout, que si luckynumber se distingue de la précédente valeur de précédent sale vérification $watch gestionnaire et $rendu sont appelés.

    Dans mes exemples $rendre appelé si le modèle précédent, la valeur était de "3" ou "". Si le modèle précédent, la valeur est null $le rendu n'est pas appelé.

    Pourquoi $timeout à 0 delay fonctionne: lorsque vous appelez $timeout à 0 fonction de délai avec l'évolution de la luckynumber à la valeur null est reportée à la fin de les événements de la file d'attente (javascript dans un navigateur exécute sur un seul thread). $viewChangeListener n'est pas un modèle de changement de valeur de 7 à null. $digest finitions. Alors $timeout gestionnaire est appelé. Modèle de valeur est définie sur null. $watch gestionnaire et $de rendu sont appelés. $rendu définit la valeur d'entrée à "".

  2. 2

    Enfin une solution. Utiliser $regarder au lieu de ng-changement:

    $scope.$watch('luckynumber', function() {
    if ($scope.luckynumber == 7) {
        alert('The lucky number mustn\'t be equal 7.');
        $scope.luckynumber = null;
    }
})

    Violon.

    Cette autre DONC réponse par @Valentyn m'a fait penser à essayer cette solution à cette question.

  3. 1

    Si vous mettez simplement 

    $scope.luckynumber = undefined;

    avant l'alerte que vous n'avez pas d'éliminer la condition de la course, mais vous ne le modifier de sorte que 7 est effacé correctement, mais parfois, vous obtenez l'alerte deux fois.

    Si l'alerte code est remplacé par quelque chose de la quantité, comme modifier le DOM pour afficher une erreur, alors ce problème ne sera pas important.