Angularjs: input [text] ngChange se déclenche pendant que la valeur change

ngChange se déclenche pendant que la valeur change (ngChange n'est pas similaire à l'événement onChange classique). Comment puis-je lier l'événement onChange classique avec angularjs, qui ne se déclenchera que lorsque le contenu sera validé?

Reliure actuelle:

<input type="text" ng-model="name" ng-change="update()" />

Cet article montre un exemple de directive qui retarde les changements de modèle dans une entrée jusqu'à ce que l' événement de flou se déclenche.

Voici un violon qui montre le ng-change fonctionnant avec la nouvelle directive ng-model-on-blur. Notez qu'il s'agit d'une légère modification du violon d'origine .

Si vous ajoutez la directive à votre code, vous modifieriez votre liaison comme suit:

<input type="text" ng-model="name" ng-model-onblur ng-change="update()" />

Voici la directive:

// override the default input to update on blur
angular.module('app', []).directive('ngModelOnblur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1, // needed for angular 1.2.x
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return;

            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });         
            });
        }
    };
});

Remarque: comme @wjin le mentionne dans les commentaires ci-dessous, cette fonctionnalité est prise en charge directement dans Angular 1.3 (actuellement en version bêta) via ngModelOptions. Consultez la documentation pour plus d'informations.

Il s'agit des ajouts récents à AngularJS, pour servir de réponse future (également pour une autre question ).

Angular nouvelles versions (maintenant en version 1.3 beta), AngularJS prend en charge nativement cette option, en utilisant ngModelOptions, comme

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

Documentation sur NgModelOptions

Exemple:

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />

Au cas où quelqu'un d'autre chercherait une prise en charge supplémentaire des touches "Entrée", voici une mise à jour du violon fourni par Gloppy

Code pour la liaison de touches:

elm.bind("keydown keypress", function(event) {
    if (event.which === 13) {
        scope.$apply(function() {
            ngModelCtrl.$setViewValue(elm.val());
        });
    }
});

Pour tous ceux qui luttent avec IE8 (il n'aime pas le détachement ('input'), j'ai trouvé un moyen de contourner cela.

Injectez $ sniffer dans votre directive et utilisez:

if($sniffer.hasEvent('input')){
    elm.unbind('input');
}

IE8 se calme si vous faites cela :)

Selon ma connaissance, nous devrions utiliser ng-change avec l'option de sélection et dans le cas de la zone de texte, nous devrions utiliser ng-blur.

N'est-ce pas utiliser $ scope. $ Watch pour refléter mieux les changements de la variable scope?

Remplacer le comportement onChange de l'entrée par défaut (appeler la fonction uniquement lorsque le focus de perte de contrôle et la valeur ont été modifiés)

REMARQUE: ngChange ne ressemble pas à l'événement onChange classique , il déclenchement de l'événement alors que la valeur change Cette directive stocke la valeur de l'élément quand il obtient le focus
sur brouille il vérifie si la nouvelle valeur a changé et s'il déclenche l'événement

@param {String} - nom de la fonction à invoquer lorsque "onChange" doit être déclenché

@example <input my-on-change = "myFunc" ng-model = "model">

angular.module('app', []).directive('myOnChange', function () { 
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            myOnChange: '='
        },
        link: function (scope, elm, attr) {
            if (attr.type === 'radio' || attr.type === 'checkbox') {
                return;
            }
            // store value when get focus
            elm.bind('focus', function () {
                scope.value = elm.val();

            });

            // execute the event when loose focus and value was change
            elm.bind('blur', function () {
                var currentValue = elm.val();
                if (scope.value !== currentValue) {
                    if (scope.myOnChange) {
                        scope.myOnChange();
                    }
                }
            });
        }
    };
});

J'ai eu exactement le même problème et cela a fonctionné pour moi. Ajoutez ng-model-updateet ng-keyupet vous êtes prêt à partir! Voici la documentation

 <input type="text" name="userName"
         ng-model="user.name"
         ng-change="update()"
         ng-model-options="{ updateOn: 'blur' }"
         ng-keyup="cancel($event)" />