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

1

jquery 应该在 angular 之前加载

于 2014-06-29T05:33:43.757 回答