Question

我为jquery datepicker构建了指令。当用户点击下个月的操作时，我的问题就开始了。

日历从某些日子的高亮显示开始 - 列表来自服务器，当用户点击下个月时，日历不会显示突出显示的日期。每次点击下一个/上个月我都会通过突出显示图标呼叫服务器新的一天列表。

问题是日历在服务器请求完成之前显示/初始化。

有我的代码：

  app.directive('calanderD', function($timeout, $window) {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'calanderDTemplate.html',
        scope: {
            data: '=',
            fn: '&'
        },
        controller: function($scope, $element, $q) {

            $scope.date_format = 'dd-mm-yyyy';
            $scope.fetchHighligtedDays = function(date) {

               $scope.data.days = here is the server call...
               ..
            };

             $scope.getHighligthedDays = function(date) {
                var flag = false;
                if ($scope.data.days.length) {
                    for (var idx in $scope.data.days) {
                        if ($scope.data.days[idx].date === date) {
                            if ($scope.data.days[idx].highlight === 'true'){
                                flag = true;
                            }
                            break;
                        }
                    }
                }
                return flag;
            };
        },
        link: function(scope, element, attrs) {

            if (scope.data) {

                scope.dateOptions = {
                    showOn: "button",
                    buttonImage: "pics/datepicker.png",
                    buttonImageOnly: true,
                    showOtherMonths: true,

                    changeMonth: false,
                    changeYear: false,
                    showButtonPanel: true,
                    buttonText: '',
                    prevText: '',
                    nextText: '',

                    firstDay: 1,   
                    dateFormat: scope.date_format,


                    beforeShowDay: function(dateToBeRendered) {

                        var isHighlight = scope.getHighligthedDays(dateToBeRendered);
                        if (isHighlight) {

                           // do style stuff here
                           ...
                        }
                        return [true, 'highlight-style','')];
                    },

                    onChangeMonthYear: function(year, month, inst) {
                        var date = new Date(year, month);
                        scope.fetchMontlyAlerts(date);
                    }
                };
            }

        }
    };
});

感谢您的帮助。

Answer 1

一个可能的解决方案就是隐藏日历，直到数据可用为止（伪代码）：

if ($scope.data.days) {
show = true
}

当他们点击下一个或上个月按钮时，将$scope.data.days = ''添加到ajax调用之前的函数

您也可以（这可能是一个更好的主意）在ajax调用的成功返回的promise函数中设置show变量。

角度指令中的Jquery-ui datepicker - beforeShowDay问题

1 个答案: