Question

希望其他人也注意到这一点： -

我们正在使用AngularJS 1.0并使用type =“date”with element来获取Chrome的不错的默认日期时间选择器。一切都工作正常，直到chrome最近更新到[24.0.1312.52]。现在，如果我使用datetime选择器更改日期，AngularJS数据绑定不会将其保存为绑定$ scope的json属性。

如果我通过任何键盘按键更改日期，则数据绑定会将日期保存到属性绑定。

造成这个问题的原因可能是什么。？

Answer 1

我注意到了同样的行为，并注意到Sutikshan正走在正确的道路上。

HTML 5 input date要求值为RF 3339格式，因此，我们可以调整AngularJS input directive以相应地格式化和解析值。

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

基础是我们确保NgModelController分别在更新视图值和模型值时使用$ formatters和$ parsers。

Answer 2

我们在angularJS google小组中得到了帮助： -

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

Peter Bacon Darwin的JSFeedle

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 3

当您通过选择器选择日期时，Chrome似乎无法触发input。短期黑客攻击是将change事件（Chrome 触发）转发给input;幸运的是，AngularJS不会在侦听器中使用事件本身，因此您无需担心映射事件值或任何事情：

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

更好的解决方案是弄清楚Chrome无法解雇的原因input。

警告：虽然AngularJS代码中似乎没有任何地方会导致change触发（从而启动无限循环），而粗略测试暗示上述工作，“更好解决方案“将是一个更好的解决方案。

在更新24.0.1312.52之后，chrome DateTime控件的AngularJS数据绑定不起作用

3 个答案: