添加或更新事件后,Angular Bootstrap日历不会更新视图

时间:2018-06-25 09:19:14

标签: javascript angularjs angular-bootstrap-calendar

我正在使用mattlewis引导日历。事件显示正确。但是,如果我向日历添加新事件,它将在其他日期复制事件,而不是在添加日期中添加事件。只有刷新页面后,一切正常/ strong>很好。我尝试了$ scope。$ apply也适用。但是似乎没有任何作用。

这是我的html

<mwl-calendar events="events" view="calendarView" 
    view-date="viewDate" view-title="calendarTitle"
    on-event-click="eventClicked(calendarEvent)"
    on-event-times-changed="eventTimesChanged(calendarEvent);
    calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
    cell-is-open="cellIsOpen" day-view-start="06:00"
    day-view-end="22:59" day-view-split="30"
    cell-modifier="cellModifier(calendarCell)"
    on-event-click="eventClicked(calendarEvent)"
    cell-auto-open-disabled="true"
    on-timespan-click="timespanClicked(calendarDate, calendarCell)">
</mwl-calendar>

Controller.js

$scope.events = [];
$scope.myevents = function(start, end, timezone, callback) {
    SalesNotifyService.getAllNotify().then(function(response) {
        $scope.allleadnotify  = response.data;
        console.log($scope.allleadnotify);
        var events = [];
        angular.forEach($scope.allleadnotify,function(event,key){
            var today = new Date();
            var notifyDates = new Date(event.notifyDate);
            if(event.leadName!=null){
                $scope.events.push({
                    title: event.notifyType,
                    startsAt : event.notifyDate,
                    endsAt : event.notifyEndDate,
                    withoffender: event.leadName,
                });
            } else {
                $scope.events.push({
                    title: event.notifyType,
                    startsAt : event.notifyDate,
                    endsAt : event.notifyEndDate,
                    withoffender: '',
                });
            }
        });
    });
}

现在保存后,我这样调用$ scope.myevents函数

SalesNotifyService.saveNotify(notify).then(function(response){
    $scope.notify = response.data;
    $scope.myevents();
});

但是即使我调用myevents函数,事件也不会在日历中正确填充。如果我已经有事件,那么在添加新事件后,旧事件将被复制并显示。如果我重新加载页面,那么一切都很好。在html中,我是在ng-init中调用myevents函数。在添加事件后无需重新加载页面,谁能告诉我如何正确显示事件?

1 个答案:

答案 0 :(得分:1)

也许您需要在重新添加事件之前将$ scope.events重置为空数组?如果您不这样做,那么每次调用$ scope.myevents()时,您都将在同一数组中再次添加事件,而不会删除它们。因此在$ scope.myevents中,在函数开始处执行$ scope.events = []

$ scope.events =事件;并将事件推送到本地“事件”数组中。