angularjs Wiązanie danych z kontroli DateTime Chrome nie działa po aktualizacji 24.0.1312.52

Question

Nadzieja ktoś obserwuje się również w ten sposób: -

Używamy angularjs 1,0 i używając type = „data” z elementem do uzyskania Chrome piękny domyślne datetime kompletacji . Wszystko działało dobrze, dopóki Chrome nie zaktualizował się ostatnio do [24.0.1312.52]. Teraz Jeśli zmienię datę przy użyciu selektora datetime, powiązanie danych AngularJS nie zapisze go, aby powiązać właściwość json z $ scope.

Jeśli zmieniam datę za pomocą dowolnego klawisza w dół, powiązanie danych zapisuje datę w powiązaniu właściwości.

Co może być przyczyną tego problemu?

Answer 1

Mamy pomocy w grupie angularjs google: -

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

JSFeedle przez Petera boczek Darwinowi

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

Wygląda na to, że Chrome nie uruchamia się input po wybraniu daty za pomocą selektora. Krótkoterminowe włamanie ma na celu przesłanie change zdarzeń (w których Chrome powoduje ognisko) na input; Na szczęście angularjs nie korzysta z samej imprezy w słuchacza, dzięki czemu nie trzeba się martwić o wartości zdarzeń mapowania lub cokolwiek:

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

Lepszym rozwiązaniem byłoby, aby dowiedzieć się, dlaczego Chrome nie jest wypalanie input .

Zastrzeżenie: chociaż nie wydaje się być w dowolnym miejscu w kodzie angularjs który spowodowałby change na ogień (rozpoczynając tym samym nieskończoną pętlę) oraz testowanie pobieżne domniemanych powyższych dziełach „lepsze rozwiązanie” byłoby znacznie lepsze rozwiązanie.

Answer 3

Zauważyłem to samo zachowanie i zauważył, że Sutikshan był na dobrej drodze.

Format HTML 5 input date wymaga, aby wartość była w formacie RF 3339, dlatego możemy dostosować nasz AngularJS input directive, aby odpowiednio sformatować i przeanalizować wartość.

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

podstaw jest to, że mamy pewność, że nasze NgModelController wykorzystuje formatek $ i $ parser podczas aktualizacji wartości i wartości widok modelu, odpowiednio.