希望其他人也观察到这一点:-
我们使用 AngularJS 1.0 并使用 type="date" 和元素来获得 Chrome 的默认日期时间选择器。一切正常,直到 chrome 最近更新到 [24.0.1312.52]。现在,如果我使用日期时间选择器更改日期,AngularJS 数据绑定不会将其保存到 $scope 的绑定 json 属性。
如果我通过任何键盘键更改日期,数据绑定会将日期保存到属性绑定。
导致此问题的原因可能是什么。
希望其他人也观察到这一点:-
我们使用 AngularJS 1.0 并使用 type="date" 和元素来获得 Chrome 的默认日期时间选择器。一切正常,直到 chrome 最近更新到 [24.0.1312.52]。现在,如果我使用日期时间选择器更改日期,AngularJS 数据绑定不会将其保存到 $scope 的绑定 json 属性。
如果我通过任何键盘键更改日期,数据绑定会将日期保存到属性绑定。
导致此问题的原因可能是什么。
我注意到了同样的行为,并注意到 Sutikshan 走在了正确的道路上。
HTML 5输入日期要求值采用RF 3339格式,因此,我们可以调整 AngularJS输入指令以相应地格式化和解析值。
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。
我们在 angularJS 谷歌组中得到了帮助:-
https://groups.google.com/forum/?fromgroups=#!topic/angular/ycYzD3xRKS8
Peter Bacon Darwin 的 JSFeedle
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());
});
});
}
}
};
});
input
当您通过选择器选择日期时,Chrome 似乎不会触发。一个短期的hack是将change
事件(Chrome确实触发)转发到input
;幸运的是 AngularJS 不会在监听器中使用事件本身,因此您无需担心映射事件值或任何事情:
$('body').on('change', 'input[type="date"]', null, function(){
$(this).trigger('input');
});
更好的解决方案是找出 Chrome 不触发的原因input
。
警告:虽然 AngularJS 代码中似乎没有任何地方会导致change
触发(从而启动无限循环),并且粗略的测试暗示了上述工作,但“更好的解决方案”将是一个更好的解决方案。