Question

我正在使用ui-calendar来显示事件。要填写日历模型，控制器将从工厂中获取事件。奇怪的部分（我无法弄清楚）是，当工厂从API获取数据时，日历显示事件就好了。但是，为了“加快速度”，Factory会将api获取的数据保存在局部变量中。如果Factory从局部变量返回数据，则日历不会显示事件。但是，如果Factory从API返回数据，则事件显示正常（因此我从工厂返回局部变量数据的方式一定有问题）。

Factory方法如下：

function getAll() {
    if (!_allEventsRequiresUpdate && _allEvents) {
        var deferred = $q.defer();
        deferred.resolve(_allEvents);
        return deferred.promise;
    }
    else {
        var request = $http({
            method: "Get",
            url: baseUrl
        });
        return request.then(function (response) {
            _allEvents = response.data;
            _allEventsRequiresUpdate = false;
            return response.data;
        }, handleError);
    }

}

从API获取数据时，_allEvents变量将被填充。两种情况下的数据（从API或本地变量返回）完全相同（至少据我所知），但是，如前所述，只有从API获取的数据才会在ui-calendar / fullcalendar中呈现。

有什么想法吗？关于我如何从工厂返回局部变量有什么问题吗？

BTW，在这两种情况下，控制器都会解除承诺。

先谢谢。

更新

以下是Angular控制器中从Factory获取数据的方法：

function getAllEvents() {
    serviceAppointmentsServices.getAll()
        .then(function (data) {
            vm.events = angular.copy(data);
            vm.fullCalendarEvents = [];

            for (var i = 0; i < vm.events.length; i++) {
                var event = {
                    id: vm.events[i].xrmId,
                    title: vm.events[i].xrmName,
                    start: moment(vm.events[i].startDate).tz('America/Santiago'),
                    end: moment(vm.events[i].endDate).tz('America/Santiago'),
                    stick: true
                }
                if (vm.events[i].xrmStatus.value == 1)
                    event.color = '#D2A15D';
                vm.fullCalendarEvents.push(event);
            }

            uiCalendarConfig.calendars["calendar"].fullCalendar('removeEventSources');
            uiCalendarConfig.calendars["calendar"].fullCalendar('addEventSource', vm.fullCalendarEvents);

        }, function (mesage) {
            toastr.error(mesage, "error!");
        });
}

这是日历配置：

vm.uiConfig = {
    calendar: {
        height: 450,
        editable: true,
        eventClick: editEvent,
        dayClick: addEvent,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventAfterAllRender: documentReady,
        locale: 'es',
        timezone: 'America/Santiago',
        customButtons: {
            addEvents: {
                text: 'nuevo',
                click: function () {
                    vm.fx.addEvent();
                    $scope.$apply()
                }
            }
        },
        header: {
            left: 'month basicWeek basicDay agendaWeek agendaDay',
            center: 'title',
            right: 'addEvents today prev,next'
        },
        eventRender: eventRender

    }
};

Answer 1

我发布了答案，以防其他人遇到同样的问题。感谢@Javarome（https://stackoverflow.com/users/650104/javarome）发帖：Directive is being rendered before promise is resolved。我听从他的建议，一切都像魅力一样。

总结：问题是该指令在控制器中解析了promise之前被触发了。所以我按照他的建议将指令包装在ng-if中（需要将变量解析为触发器，并且瞧!!!这样的东西：

<div class="container" ng-if="vm.fullCalendarEvents">
    <div class="calendar" ng-model="eventSources" calendar="calendar" config="uiConfig.calendar" ng-disabled="waitingForHttp" ui-calendar="vm.uiConfig.calendar" ></div>
</div>

ui-angular fullcalendar刷新问题

1 个答案: