我有两个输入字段,其中包含 datetimepicker 指令。
<div class="row">
<div class="col-xs-6">
<label for="trainingStartDate">Start (Date and Time)</label>
<input name="trainingStartDate"
ng-model="Training.Start"
id="trainingStartDate"
datetimepicker
class="form-control" />
</div>
<div class="col-xs-6">
<label for="trainingEndDate">End (Date and Time)</label>
<input name="trainingEndDate"
ng-model="Training.End"
id="trainingEndDate"
datetimepicker
class="form-control" />
</div>
</div>
datetimepicker实现如下:
.directive('datetimepicker',
function () {
return {
restrict: 'A',
require: 'ngModel',
scope: { 'ngModel': '=' },
link: function (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: any) {
element.datetimepicker({
dateFormat: 'dd/mm/yy',
timeFormat: 'hh:mm TT',
minDate: 0,
hourMax: 23,
onSelect: function (datetime) {
controller.$setViewValue(datetime);
controller.$render();
scope.$apply();
}
});
}
}
});
基本上,该指令的作用是打开日期和时间选择器对象,并在选择时将日期和时间设置为viewValue(在本例中为Training.Start和Training.End)。
现在我的问题是当我尝试将另一个名为greaterThan的指令添加到 trainingEndDate 输入时,我得到一个错误,我的两个指令都不能有隔离的范围。
<div class="col-xs-6">
<label for="trainingEndDate">End (Date and Time)</label>
<input name="trainingEndDate"
ng-model="Training.End"
id="trainingEndDate"
datetimepicker
greater-than="{{ Training.Start }}"
class="form-control" />
</div>
这是实现greaterThan指令的方式:
.directive('greaterThan',
function () {
return {
restrict: 'A',
require: 'ngModel',
scope: { 'ngModel': '=' },
link: function (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: any) {
var validate = function (viewValue) {
if (!viewValue || !attributes.greaterThan) {
controller.$setValidity('greaterThan', true);
}
else {
var startDate = new Date(eval(attributes.greaterThan));
var endDate = new Date(viewValue);
controller.$setValidity('greaterThan', endDate > startDate);
}
return viewValue;
};
controller.$parsers.unshift(validate);
controller.$formatters.push(validate);
attributes.$observe('greaterThan', function (comparisonModel) {
return validate(controller.$viewValue);
});
}
}
});
我可以在输入字段中实现这两个指令吗?我需要使用greaterThan指令来检查viewValue(Training.End)是否小于Training.Start日期。在此先感谢您的帮助!