カスタマイズされたディレクティブでは、モデルからグレゴリオ暦の日付を取得して日付を変換し、それをペルシャの日付に変換してからユーザーに表示します。
ペルシャ日付への変換は persianDatePicker を使用して行われ、グレゴリオ日付への変換によってモデルが更新されます。私の問題は、DatePicker から日付を選択すると、NgModelController のパーサー関数が機能せず、日付の変更に反応しないことです。関連するJSファイルのDatePickerのOnSelectイベントで次の命令を使用しました
$("#" + inputId).change();
Link関数に関数を入れて、onSelectedJalaliDateという名前で呼び出しました
関連する JS ファイルで。
onSelectedJalaliDate = function (value) {
ngModelCtrl.$setViewValue(value);
}
パーサー用に宣言された関数が呼び出されますが、モデルは更新されません。知っている人は、関数を呼び出してモデルを更新する方法を教えてください。私は firfox バージョン 29.0.1 を使用しました。
指令:
(function () {
var direc = function () {
return {
restrict: 'EA',
require: '^ngModel',
scope: {},
template: '<input ng-class="{test:!isError}"></input>',
replace: true,
link: function (scope, element, attrs, ngModelCtrl) {
scope.isError = true;
var inputId = attrs['id'];
if (!inputId || !ngModelCtrl)
return;
//gregorianToJalali will be called every time a model change, converting
//gregorian dates and presenting persian date on the view
ngModelCtrl.$formatters.unshift(gregorianToJalali);
function gregorianToJalali(viewValue) {
if (viewValue) {
scope.isError = true;
var gDate = new Date(viewValue);
var gY = gDate.getFullYear();
var gM = gDate.getMonth();
var gD = gDate.getDate();
var value = JalaliDate.gregorianToJalali(gY, gM, gD);
var jalali = value[0].toString() + "/" + value[1].toString() + "/" + value[2].toString();
//The return of a formmatter is what is rendered on the DOM
return jalali;
}
}
//with that, jalaliToGregorian will be called every time a user fill the input
ngModelCtrl.$parsers.unshift(jalaliToGregorian);
function jalaliToGregorian(viewValue) {
if (!validateJalaliDate(viewValue)) {
return undefined;
}
else {
var jDate = viewValue.split('/');
var value = JalaliDate.jalaliToGregorian(jDate[0], jDate[1], jDate[2]);
var gDate = new Date(value[0], value[1], value[2]);
//The return of a $parsers is what is saved to the model
return gDate;
}
};
function validateJalaliDate(value) {
var array = value.split('/');
var result;
if (array.length != 3)
result = false;
else
result = JalaliDate.checkDate(array[0], array[1], array[2]);
ngModelCtrl.$setValidity('jalaliDatePickerValidation', result)
scope.isError = result;
return result;
}
Calendar.setup({
inputField: inputId,
ifFormat: '%Y/%m/%d',
dateType: 'jalali'
});
onSelectedJalaliDate = function (value) {
ngModelCtrl.$setViewValue(value);
}
}
}
};
var mod = angular.module('jalaliDatePickerModule', []);
mod.directive('jalaliDatePicker', direc);
}());