我想做以下事情：
我的控制器模型中有一个日期对象，我想让用户修改它。
应为用户提供两个输入字段。
第一个输入字段应修改日期，另一个输入字段应修改时间。
两个输入字段应适用于相同的日期模型。
<input ng-model="model.date" date-format="YYYY-MM-DD">
<input ng-model="model.date" date-format="HH:mm:SS">
我没有找到有关此绑定的文献。
通常 ng-model 指令负责处理输入字段的值。
现在我想用我自己的格式覆盖这个值。
此外，如果用户更改输入，则应解析更改并将其放回到日期对象中。
由于 vanilla js 中的日期操作有点奇怪，我使用 moment.js 来格式化和解析日期和字符串。
我当前的方法如下所示：
app.directive('dateFormat', function() {
return {
restrict: 'A',
link: function(scope, el, at) {
var format = at.dateFormat;
scope.$watch(at.ngModel, function(date) {
var result = moment(date).format(format);
el.val(result);
});
}
};
});
但是，一旦我想更改浏览器中的输入值，这就会中断。
我得到一些 NaN:NaN...
我的问题是：
- 我该如何建模？
- 这种方法对于角度哲学是否有效，还是我在这里做了一些奇怪的事情？
- 我可以同时使用 ng-model 和我的 date-format 指令吗？
- 有没有更简单的方法来做到这一点？
过滤器就是您正在寻找的：
//In your controller
$scope.modelDate = $filter('date')(dateToFormat, "YYYY-MM-DD");
//In your view
<input ng-model="modelDate" type="text">
话虽如此，您尝试做的事情并不太“关闭”，因为每当用户写入输入时，格式都会被破坏。您需要使用 ngModel，它有一种特殊的方式来处理指令（API），并且可以在链接过程中作为第四个参数直接浏览。
所以对于你的代码来说，它会是这样的：
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelController) {
ngModelController.$parsers.push(function(data) {
//View -> Model
return data;
});
ngModelController.$formatters.push(function(data) {
//Model -> View
return $filter('date')(data, "YYYY-MM-DD");
});
}
}
更多信息here http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
