Angularjs: input [text] ngChange dispara enquanto o valor está mudando

ngChange está disparando enquanto o valor está mudando (ngChange não são semelhantes ao evento onChange clássico). Como posso vincular o evento onChange clássico com angularjs, que só será acionado quando o conteúdo for confirmado?

Vinculação atual:

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

Esta postagem mostra um exemplo de diretiva que atrasa as alterações do modelo em uma entrada até que o evento de desfoque seja acionado.

Aqui está um violino que mostra o ng-change funcionando com a nova diretiva ng-model-on-blur. Observe que este é um ligeiro ajuste ao violino original .

Se você adicionar a diretiva ao seu código, você alteraria sua ligação para:

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

Aqui está a diretiva:

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

Observação: como @wjin menciona nos comentários abaixo, esse recurso é compatível diretamente com o Angular 1.3 (atualmente em beta) via ngModelOptions. Veja os documentos para mais informações.

Trata-se de adições recentes ao AngularJS, para servir como resposta futura (também para outra pergunta ).

Versões mais recentes do Angular (agora em 1.3 beta), o AngularJS oferece suporte nativo a essa opção, usando ngModelOptions, como

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

NgModelOptions docs

Exemplo:

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

Caso alguém esteja procurando suporte adicional para "enter" no teclado, aqui está uma atualização do violino fornecido por Gloppy

Código para vinculação de teclas:

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

Para qualquer pessoa que esteja lutando com o IE8 (ele não gosta de desvincular ('input'), encontrei uma maneira de contornar isso.

Injete $ sniffer em sua diretiva e use:

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

O IE8 se acalma se você fizer isso :)

De acordo com meu conhecimento, devemos usar ng-change com a opção select e no caso de caixa de texto devemos usar ng-blur.

Não está usando $ scope. $ Watch para refletir melhor as alterações da variável de escopo?

Substitua a entrada padrão no comportamento de mudança (chame a função apenas quando o foco de perda de controle e o valor forem alterados)

NOTA: ngChange não é semelhante ao evento onChange clássico, ele dispara o evento enquanto o valor está mudando. Esta diretiva armazena o valor do elemento quando ele obtém o foco
On blurs verifica se o novo valor foi alterado e, se for o caso, dispara o evento

@param {String} - nome da função a ser invocada quando o "onChange" deve ser acionado

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

Eu tive exatamente o mesmo problema e isso funcionou para mim. Adicione ng-model-updatee ng-keyuppronto! Aqui está a documentação

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