angulaire.js - À l'aide d'Angularjs, comment modifier le modèle dans le document prêt et mettre à jour le DOM lié au modèle ?

Question

Dans l'exemple suivant, le modèle a été modifié, mais l'interface n'a pas été mise à jour
Exemple :
http://jsbin.com/relanafohu/4/edit

Answer 1

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

Answer 2

Toutes les modifications de modèle dans les rappels d'opérations asynchrones qui ne sont pas connues d'Angular doivent utiliser la méthode apply pour notifier explicitement à angulaire de mettre à jour la vue. Pour plus de détails, consultez la documentation d'angular sur apply.

De plus, si angulaire est en cours de mise à jour (cercle de digestion) et que apply est appelé, l'erreur suivante apparaîtra :

Error: $apply already in progress

Afin d'éviter cette erreur, vous pouvez d'abord déterminer l'état actuel, et vous pouvez directement utiliser la méthode encapsulée suivante :

jssafeApply = function( scope, fn) {
    var phase = scope.$root.$$phase;
    if(phase == '$apply' || phase == '$digest') {
        if(fn && (typeof(fn) === 'function')) { fn();
        }
    } else {
        scope.$apply(fn);
    }
}

Lorsque vous devez définir le modèle, il suffit :

jssafeApply( $scope, function(){
    // 在这里写你修改model的代码
});

Plus de détails sur cette erreur peuvent être trouvés dans cette question stackoverflow