2

カスタマイズされたディレクティブでは、モデルからグレゴリオ暦の日付を取得して日付を変換し、それをペルシャの日付に変換してからユーザーに表示します。
ペルシャ日付への変換は 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);

}());
4

1 に答える 1