如何使用ng-show隐藏日历时如何更新angularjs fullcalendar

时间:2015-01-26 16:37:26

标签: angularjs fullcalendar

当我向eventsource添加元素时,只有当日历可见时,双向绑定似乎才有效。如何在隐藏日历时让双向绑定工作?

HTML

<div id="timeOffBody" class="region-calendar" ng-show="!isBottomPanelVisible()">
    <div ui-calendar="uiConfig.calendar" calendar="topCalendar" class="calendar" ng-model="eventSources"></div>
</div>

相关JS

    $scope.existingRequests = [];
    $scope.pendingRequests = [];
    $scope.eventSources = [$scope.existingRequests, $scope.pendingRequests];
    $scope.addNewRequestToPendingArray = function (request) {
        $scope.pendingRequests.push(request);
    };
   $scope.isBottomPanelVisible = function () {
        return (($scope.selectedStart != null) && ($scope.selectedEnd != null));
    }

这是plunker。在plunker示例中,您可以看到日历仅在其容器可见时更新,但即使在隐藏时也会添加事件范围数组。

1 个答案:

答案 0 :(得分:2)

我刚尝试过。这是因为UI日历使用fullcalendar.js并且它不在AngularJS区域中,因此在隐藏时它不起作用。

以下是plunker

这个想法很简单。将uiCalendarConfig注入您的控制器

并像uiCalendarConfig.calendars.myCalendar.fullCalendar( 'removeEventSource', $scope.events )

一样使用它