从datePicker和ngModelController的$ parser函数中选择日期后,更改事件不会激活

时间:2014-06-16 05:00:30

标签: parsing datepicker angularjs-directive onchange angular-ngmodel

在我的自定义指令中,我通过从模型中获取格里高利日期并将其转换为波斯日期然后将其显示给用户来进行日期转换。
转换为波斯日期是通过使用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);

}());

1 个答案:

答案 0 :(得分:0)

应该在角度

之前加载jquery