Angularjs: input ngChange é acionado enquanto o valor está mudando

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

Ligação atual:

 

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

Aqui está um violino que mostra a mudança do ng trabalhando com a nova diretiva ng-model-on-blur. Note que este é um ligeiro ajuste no violino original .

Se você adicionar a diretiva ao seu código, você mudaria sua binding para isto:

  

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

Nota: como @wjin menciona nos comentários abaixo, este recurso é suportado diretamente no 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 questão ).

Versões mais recentes angulares (agora em 1.3 beta), AngularJS suporta nativamente esta opção, usando ngModelOptions , como

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

NgModelOptions docs

Exemplo:

  

No caso de alguém mais procurar por um suporte de pressionamento de tecla “enter” adicional, aqui está uma atualização para o violino fornecido por Gloppy

Código para binding de teclas:

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

Para qualquer um que esteja sofrendo com o IE8 (ele não gosta do unbind (‘input’), eu encontrei uma maneira de contornar isso.

Injetar $ sniffer em sua diretiva e usar:

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

IE8 se acalma se você fizer isso 🙂

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

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

Substituir o comportamento onChange de input padrão (chamar a function somente quando o foco de perda de controle e o valor foi alterado)

OBSERVAÇÃO: ngChange não é semelhante ao evento onChange clássico que aciona o evento enquanto o valor está mudando Essa diretiva armazena o valor do elemento quando ele recebe o foco
On blurs verifica se o novo valor foi alterado e, em caso afirmativo, aciona o evento

@param {String} – nome da function a ser invocado quando o “onChange” deve ser triggersdo

@example

 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 tinha exatamente o mesmo problema e isso funcionou para mim. Adicione ng-model-update e ng-keyup e ng-keyup ! Aqui estão os docs