ui-calendar单元格背景颜色未首次显示

Question

我正在尝试从Rest获取日期列表并使用dayRender更改这些日期的背景颜色。但是当我尝试这样做时，颜色第一次没有变化。如果我去下个月和回到这个月，它将完美地工作。这里是截图，使其更清晰。 当我加载页面

当我从6月搬到7月

回到6月

这是我的代码.rest / leave / holidayList是从db中检索日期的其余网址。

app.factory('calendarSer', ['$http', '$rootScope', 'uiCalendarConfig', function($http, $rootScope, uiCalendarConfig) {
	

    return {
        displayCalendar: function($scope) {
        
           $http.get("rest/leave/holidayList", {}).success(function(data, status, headers, config) {
    	        $scope.holidayList = data;
    	        console.log($scope.holidayList);
    	        
    	 		}).error(function(data, status, headers, config) {
    	        alert("error");
    	 		});
        	
            $calendar = $('[ui-calendar]');
            var date = new Date(),
                d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear();
            $scope.changeView = function(view) {
                $calendar.fullCalendar('changeView', view);
            };
            var m = null;
            if ($scope.selectable == "Yes") {
                m = true;
            } else {
                m = false;
            }
            /* config object */
            $scope.uiConfig = {
                calendar: {
                    lang: 'da',

                    height: 400,
                    editable: true,
                    selectable: m,
                    header: {
                        left: 'month basicWeek basicDay',
                        center: 'title',
                        right: 'today prev,next'
                    },
                    eventClick: function(date, jsEvent, view) {
                        $scope.alertMessage = (date.title + ' was clicked ');
                        alert("clicked" + date.title);
                    },
                    select: function(start, end, allDay) {

                        var obj = {};
                        obj.startDate = start.toDate();
                        obj.endDate=moment(end - 1 * 24 * 3600 * 1000).format('YYYY-MM-DD');

                        $rootScope.selectionDate = obj;
                        $("#modal1").openModal();
                        //    calendar.fullCalendar('unselect');
                    },
                    dayRender: function (date, cell) {
                    	
                        
                        var today = new Date();
                        today=moment(today).toDate();
                        var end = new Date();
                        end=moment(end).toDate();
                        end.setDate(today.getDate()+7);
                        date=moment(date).toDate();
                        
                        
                        angular.forEach($scope.holidayList,function(value){
                      
          	        	  if(((moment(value.holiday_date).format("YYYY-MM-DD"))==moment(date).format("YYYY-MM-DD")))
          	        		  {
          	        		 cell.css("background-color", "red");
          	        		  }
          	        });
          	            
             
                      
                    },
                    eventRender: $scope.eventRender,
                    

                   
                }
            };
            
         
            
            $scope.events = [];
            $scope.eventSources = [$scope.events];
            $http.get($scope.url, {
                cache: true,
                params: {}
            }).then(function(data) {

                console.log(data);
                $scope.events.slice(0, $scope.events.length);
                angular.forEach(data.data, function(value) {

                    console.log(value.title);
                    if (value.approvalStatus == "Approved") {
                        var k = '#114727';
                    } else {
                        k = '#b20000'
                    }
                    $scope.events.push({

                        title: value.signum,
                        description: value.signum,
                        start: value.startDate,
                        end: value.endDate,
                        allDay: value.isHalfDay,
                        stick: true,
                        status: value.approvalStatus,
                        backgroundColor: k


                    });
                });
                
            });
            
            

        }
    }

}]);

Answer 1

请记住，REST调用是异步的。只需将所有设置颜色的代码放在promise中，这样当REST服务rest/leave/holidayList响应时，就会绘制颜色。如果需要，您可以使用嵌套的promise。

以下是一些代码：

$http.get('rest/leave/holidayList').then(function(response) {
     // success 
     $scope.holidayList = data;

     /* config object */
     $scope.uiConfig = {
         calendar: {
           /* calendar code */
         }
     }

}, function(response) {
    // error handler
});

要比较“成功”和“然后”的使用，请看： https://stackoverflow.com/a/16385350/8058079