web-dev-qa-db-fra.com

Angular - ng-change ne se déclenche pas lorsque ng-model est modifié

L'entrée est la suivante:

<input type="text" ng-model="repair.test"  ng-change="action()" />

action() est exécuté lorsque je tape et modifie manuellement l'entrée. Cependant, si je modifie la valeur repair.test par une autre fonction par programme, il ne déclenche pas l'action ng-change. J'ai lu le tutoriel angulaire et c'est probablement le comportement attendu.

https://docs.angularjs.org/api/ng/directive/ngChange

"L'expression n'est pas évaluée lorsque le changement de valeur provient du modèle." <- J'ai besoin de ça aussi ... Comment puis-je déclencher une action dans le contrôleur lorsque le modèle change de quelque façon que ce soit? (saisie en entrée ou par toute autre fonction)

Merci pour l'aide.

Modifier:

La valeur du modèle est en fait le form.$valid, qui possède son propre contrôleur de formulaire (je pense), c'est pourquoi j'ai utilisé la fonction action pour essayer de transmettre la valeur au contrôleur parent. Donc, $scope.$watch pour le moment ne fonctionne pas, seulement quand il est initialisé.

javascriptangularjsdata-bindingangular-ngmodelangularjs-ng-change
17
tomazahlin

ngChange est juste pour l'entrée, si vous voulez écouter le modèle, faites comme ça

$scope.$watch('repair.test', function(newvalue,oldvalue) {

            });
25
ThomasP1988

L'expression ngChange est uniquement évaluée lorsqu'une modification de la valeur d'entrée entraîne la validation d'une nouvelle valeur dans le modèle.

Not sera évalué:

  • si la valeur renvoyée par le pipeline de transformation $parsers n'a pas changé
  • si l'entrée est toujours invalide puisque le modèle .__ restera nul
  • si le modèle est modifié par programme et non par un changement en valeur d'entrée

Essayez de créer un observateur avec $ scope. $ Watch - $watch(watchExpression, listener, [objectEquality]);

Exemple 

$scope.$watch('repair.test', function(newValue, oldValue) {
    // ...
});
6
naXa

Vous pouvez utiliser une fonction de surveillance dans votre contrôleur

$scope.$watch('repair.test', function() {
    $scope.action();
});
3
ivarni

Une autre solution consisterait à utiliser une directive surveillant le modèle pour toute modification au lieu d'utiliser ng-change. 

app.directive('onModelChange', function($parse){
    return {
        restrict: "A",
        require: "?ngModel",
        link: function(scope, elem, attrs, ctrl) {
            scope.$watch(attrs['ngModel'], function (newValue, oldValue) {
                if (typeof(newValue) === "undefined" || newValue == oldValue) {
                    return;
                }
                var changeExpr = $parse(attrs['onModelChange']);
                if (changeExpr) {
                    changeExpr(scope);
                }
            });
        } 
    };
});

Ensuite, vous l'utiliseriez comme ceci:

<input class="value" type="text" ng-model="myVar" on-model-change="doSomething(myVar)"/>
0
Nathan Moinvaziri