基本上，我正在尝试为日期选择器编写指令。在此指令中，我使用ng-model的变量将更改后的值反映给父控制器。但是我有一些问题。我不知道如何设置ng-model变量的初始值。其次，我不了解如何更新ng-model变量并对其进行验证。
我已经尝试过这样的事情。
angular.module("mainModule.directives").directive('datePicker', function () {
var directive = {
restrict: 'E',
replace : false,
template : '<input ng-model="date" type="text"/>',
require : 'ngModel',
scope : {},
link : function($scope, elem, attr, ngModelCtr) {
$scope.date = ngModelCtr.$viewValue;
function fromUser(text) {
$scope.date = ngModelCtr.$viewValue;
}
function toUser(text) {
ngModelCtr.$setViewValue($scope.date);
}
ngModelCtr.$parsers.push(fromUser);
ngModelCtr.$formatters.push(toUser);
}
};
return directive;
});
<date-picker ng-model="modelDate"></date-picker>
解析器和格式化程序使用现有值，并且应该返回我认为经过解析或格式化的结果。您可以设置ngModelController.$render一个将在值更改时调用的函数，然后ngModelController.$setViewValue在需要时用于更新值。这是一个小提琴，显示了使用momentjs仅在输入有效日期后才更新基础模型（fiddle）：
link : function(scope, elem, attr, ctrl) {
ctrl.$render = function() {
scope.date = moment(ctrl.$viewValue).format("YYYY-MM-DD");
};
scope.$watch('date', function(newValue, oldValue) {
// only update if it is a valid date string
var m = moment(newValue);
if (m.isValid()) {
ctrl.$setViewValue(m);
}
});
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句