Come creare una direttiva on-change per AngularJS?

Question

Normalmente aggiornamenti ng-modello modello di ogni utente tempo legato spinge la chiave:

<input type="text" ng-model="entity.value" /> 

Questa grande opera in quasi tutti i casi.

Ma ho bisogno di aggiornarlo quando si verifica un evento onchange quando si verifica un evento onkeyup/onkeydown.

Nelle versioni precedenti di angolare c'era una direttiva istantanea modello-ng che funzionava come il modello ng funziona ora (almeno per l'utente - non so nulla delle loro implementazioni). Quindi, nella versione precedente, se avessi appena fornito ng-model, stavo aggiornando il modello onchange e quando ho specificato ng-model-instant stava aggiornando il modello sukeypup.

Ora ho bisogno di ng-model da utilizzare sull'evento "change" dell'elemento. Non voglio che sia istantaneo. Qual è il modo più semplice per farlo?

EDIT

L'input deve ancora riflettere eventuali altre modifiche al modello - se il modello verrà aggiornato in altro luogo, valore dell'ingresso dovrebbe riflettere questo cambiamento.

Ciò di cui ho bisogno è che la direttiva ng-model funzioni come ha funzionato nelle versioni precedenti di angularjs.

Ecco una spiegazione di quello che sto cercando di fare: http://jsfiddle.net/selbh/EPNRd/

Answer 1

Qui ho creato per voi la direttiva onChange. Demo: http://jsfiddle.net/sunnycpp/TZnj2/52/

app.directive('onChange', function() {  
    return { 
     restrict: 'A', 
     scope:{'onChange':'=' }, 
     link: function(scope, elm, attrs) { 
      scope.$watch('onChange', function(nVal) { elm.val(nVal); });    
      elm.bind('blur', function() { 
       var currentValue = elm.val(); 
       if(scope.onChange !== currentValue) { 
        scope.$apply(function() { 
         scope.onChange = currentValue; 
        }); 
       } 
      }); 
     } 
    };   
}); 

Answer 2

io non sono sicuro se c'è un modo migliore per fare questo, ma è possibile farlo con una direttiva personalizzato (su qualsiasi evento jQuery desiderato)

<input type="text" ng-model="foo" custom-event="bar" /> 
<p> {{ bar }} </p> 

// create the custom directive 

app.directive('customEvent', function() { 
    return function(scope, element, attrs) { 
     var dest = attrs.customEvent; 

     $(element[0]).on('any-jquery-event', function(e) { 
      e.preventDefault(); 

      // on the event, copy the contents of model 
      // to the destination variable 
      scope[dest] = scope.foo; 

      if (!scope.$$phase) 
       scope.$apply(); 
     }); 
    } 
}); 

Answer 3

Consulta anche: la direttiva AngularJS ngChange.

Se applicato a un input < >, le modifiche si verificano dopo ogni pressione del tasto non sull'evento di sfocatura.

http://docs.angularjs.org/api/ng.directive:ngChange

Answer 4

Angularjs: input[text] ngChange fires while the value is changing: Questa risposta fornisce una soluzione molto migliore che permette la direttiva personalizzata per lavorare con ngModel in modo da poter ancora utilizzare tutte le altre direttive che vanno con ngModel.

Inoltre, una soluzione ancora più flessibile che permette di specificare l'evento da utilizzare (non solo sfocatura) e altre proprietà dovrebbero essere integrato nel angolare molto presto: https://github.com/angular/angular.js/pull/2129