Angularjs: input [text] ngChange si attiva mentre il valore cambia

ngChange viene attivato mentre il valore sta cambiando (ngChange non è simile al classico evento onChange). Come posso associare il classico evento onChange con angularjs, che si attiverà solo quando i contenuti sono impegnati?

Associazione corrente:

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

Questo post mostra un esempio di una direttiva che ritarda le modifiche del modello a un input fino all'attivazione dell'evento blur .

Ecco un violino che mostra il ng-change che funziona con la nuova direttiva ng-model-on-blur. Nota che questa è una leggera modifica al violino originale .

Se aggiungi la direttiva al tuo codice, cambierai il tuo legame con questo:

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

Ecco la direttiva:

// 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: come menzionato da @wjin nei commenti qui sotto, questa funzione è supportata direttamente in Angular 1.3 (attualmente in beta) tramite ngModelOptions. Consulta i documenti per maggiori informazioni.

Si tratta di recenti aggiunte ad AngularJS, per servire come risposta futura (anche per un'altra domanda ).

Le versioni più recenti di Angular (ora in 1.3 beta), AngularJS supporta nativamente questa opzione, usando ngModelOptions, come

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

Documenti di NgModelOptions

Esempio:

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

Nel caso in cui qualcun altro cerchi un supporto aggiuntivo per la pressione dei tasti di "invio", ecco un aggiornamento del violino fornito da Gloppy

Codice per l'associazione dei tasti:

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

Per chiunque abbia problemi con IE8 (non gli piace lo svincolo ('input'), ho trovato un modo per aggirarlo.

Inietta $ sniffer nella tua direttiva e usa:

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

IE8 si calma se lo fai :)

Secondo le mie conoscenze dovremmo usare ng-change con l'opzione select e nel caso della casella di testo dovremmo usare ng-blur.

Non sta usando $ scope. $ Watch per riflettere meglio i cambiamenti della variabile scope?

Ignora l'input predefinito suChange behavior (chiama la funzione solo quando il focus e il valore della perdita di controllo sono stati modificati)

NOTA: ngChange non è simile al classico evento onChange che attiva l'evento mentre il valore sta cambiando Questa direttiva memorizza il valore dell'elemento quando ottiene il focus
Sulle sfocature controlla se il nuovo valore è cambiato e in tal caso attiva l'evento

@param {String} - nome della funzione da richiamare quando "onChange" dovrebbe essere attivato

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

Ho avuto esattamente lo stesso problema e questo ha funzionato per me. Aggiungi ng-model-updatee ng-keyupe sei a posto! Ecco i documenti

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