Angularjs: input [text] ngChange se activa mientras el valor cambia

ngChange se activa mientras el valor cambia (ngChange no es similar al evento clásico onChange). ¿Cómo puedo vincular el evento onChange clásico con angularjs, que solo se activará cuando se confirmen los contenidos?

Enlace actual:

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

Esta publicación muestra un ejemplo de una directiva que retrasa los cambios de modelo en una entrada hasta que se activa el evento de desenfoque .

Aquí hay un violín que muestra el ng-change trabajando con la nueva directiva ng-model-on-blur. Tenga en cuenta que esto es un ligero ajuste al violín original .

Si agrega la directiva a su código, cambiaría su enlace a esto:

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

Aquí está la directiva:

// 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());
                });         
            });
        }
    };
});

Nota: como @wjin menciona en los comentarios a continuación, esta función es compatible directamente en Angular 1.3 (actualmente en beta) a través de ngModelOptions. Consulte los documentos para obtener más información.

Se trata de adiciones recientes a AngularJS, para servir como respuesta futura (también para otra pregunta ).

Angular versiones más nuevas (ahora en 1.3 beta), AngularJS admite de forma nativa esta opción, usando ngModelOptions, como

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

Documentos de NgModelOptions

Ejemplo:

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

En caso de que alguien más busque soporte adicional de pulsación de teclas "enter", aquí hay una actualización del violín proporcionada por Gloppy

Código para el enlace de pulsaciones de teclas:

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

Para cualquiera que esté luchando con IE8 (no le gusta la desvinculación ('entrada'), encontré una forma de evitarlo.

Inyecte $ sniffer en su directiva y use:

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

IE8 se calma si haces esto :)

Según mi conocimiento, deberíamos usar ng-change con la opción de selección y en el caso del cuadro de texto deberíamos usar ng-blur.

¿No está usando $ scope. $ Watch para reflejar mejor los cambios de la variable de alcance?

Anule la entrada predeterminada en el comportamiento de cambio (llame a la función solo cuando se modifique el foco y el valor de la pérdida de control)

NOTA: ngChange no es similar al evento onChange clásico, dispara el evento mientras cambia el valor.Esta directiva almacena el valor del elemento cuando se enfoca
en desenfoques, comprueba si el nuevo valor ha cambiado y, de ser así, dispara el evento.

@param {String}: nombre de la función que se invocará cuando se active "onChange"

@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();
                    }
                }
            });
        }
    };
});

Tuve exactamente el mismo problema y esto funcionó para mí. ¡Agrega ng-model-updatey ng-keyuplisto! Aquí están los documentos

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