AngularJS Associazione dati di controllo DateTime Chrome non funziona dopo l'aggiornamento 24.0.1312.52

Question

Speranza chiunque altro anche osservato questo: -

Stiamo usando AngularJS 1.0 e utilizzando type = "data" con elemento per ottenere bel selettore di default datetime di Chrome . Tutto stava funzionando bene fino a quando Chrome si è aggiornato di recente a [24.0.1312.52]. Ora Se cambio data utilizzando il selettore datetime, il collegamento dati AngularJS non lo salva per associare la proprietà json di $ scope.

Se cambio la data con qualsiasi tasto della tastiera premuto, Associazione dati salva la data in proprietà legatura.

Quale potrebbe essere la causa di questo problema?

Answer 1

Abbiamo ottenuto aiuto nel gruppo angularJS google: -

https://groups.google.com/forum/?fromgroups=#!topic/angular/ycYzD3xRKS8

JSFeedle da Peter Bacone Darwin

http://jsfiddle.net/ZsRxj/

var module = angular.module('demoApp',[]); 

module.directive('input', function() { 
    return { 
    require: '?ngModel', 
    restrict: 'E', 
    link: function (scope, element, attrs, ngModel) { 
     if (attrs.type="date" && ngModel) { 
     element.bind('change', function() { 
      scope.$apply(function() { 
      ngModel.$setViewValue(element.val()); 
      }); 
     }); 
     } 
    } 
    }; 
}); 

Answer 2

Sembra che Chrome non attivi input quando si seleziona una data tramite il selettore. Un attacco a breve termine è di inoltrare eventi change (che Chrome attiva) a input; fortunatamente AngularJS non usa l'evento stesso in chi ascolta, in modo da non è necessario preoccuparsi di valori degli eventi di mappatura o niente:

$('body').on('change', 'input[type="date"]', null, function(){ 
    $(this).trigger('input'); 
}); 

Una soluzione migliore sarebbe quella di capire perché Chrome non è sparare input .

Caveat: mentre non sembra di essere in qualsiasi parte del codice di AngularJS che causerebbe change al fuoco (dando così un ciclo infinito), e test superficiale implicita delle opere di cui sopra, la "soluzione migliore" sarebbe un soluzione molto migliore.

Answer 3

ho notato lo stesso comportamento e ho notato che Sutikshan era sulla strada giusta.

HTML 5 input date richiede che il valore di essere in formato RF 3339, quindi, siamo in grado di adattare i nostri AngularJS input directive per formattare e analizzare il valore di conseguenza.

angular.module('myApp', []).directive('input', ['$filter', 
function($filter) { 
    return { 
     require: '?ngModel', 
     restrict: 'E', 
     link: function(scope, element, attrs, ngModel) { 
      if (!ngModel || attrs.type != "date") return; 

      // Using AngularJS built in date filter, convert our date to RFC 3339 
      ngModel.$formatters = [function(value) { 
       return value && angular.isDate(value) 
        ? $filter('date')(value, 'yyyy-MM-dd') 
        : ''; 
      }]; 

      // Convert the string value to Date object. 
      ngModel.$parsers = [function(value) { 
       return value && angular.isString(value) 
        ? new Date(value) 
        : null; 
      }]; 
     } 
    }; 
}]); 

Le basi è che ci assicuriamo che il NgModelController utilizza i nostri $ formattatori e $ parser quando si aggiorna il valore valore di visualizzazione e il modello, rispettivamente.