Angular ui-调用两次的日历事件函数

Question

我正在使用 AngularJS 开发一个项目并使用 Angular-UI UI-Calendar。在我的代码中，我将 ui-calendar 的 eventSources 模型初始化为空数组 ([])，并将 ui-config "events parameter" 设置为自定义函数。该函数发出一个 $http 请求，然后调用提供给事件函数的回调函数。

但是，我发现当我加载页面或更改通过左右按钮查看的月份时，事件函数会调用两次。我该如何解决？

这是我的代码：

function CalendarCtrl($scope, Data){
 var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

 // Stores all events
    var events = [];

    /* config object */
    $scope.uiConfig = {
        calendar:{
            height: 450,
            editable: true,
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
   buttonText: {
    month: "Ay",
    week: "Hafta",
    day: "Gün",
    list: "Ajanda"
   },
   allDayText: "Tüm gün",
   eventLimitText: "daha fazla",
   firstDay: 1,
   timeFormat: 'H:mm',
   axisFormat: 'H:mm',
   lazyFetching: true,
          
          
            // Here listen for calendar change events
   events: getEvents
     }
    };

 // For angular ui-calendar element
 $scope.eventSources = [];

 // Calendar event handlers
 function getEvents(from, to, callback){
  console.log(from);  // For test purposes
      
        // Request for data from server and when it comes, call callback to update calendar
  Data.calendar.get(moment(from).unix(), moment(to).unix()).then(function(events){
   angular.forEach(events, function(event){
    event.start = moment.unix(event.start);
    if(event.end){
     event.end = moment.unix(event.end);
    }
    else{
     delete event.end;
    }

    var d = event.start;
    if(d.hour() == 0 && d.minute() == 0 && d.second() == 0){
     event.allDay = true;
    }

    if(event.important){
     event.className = "important-event";
    }

    event.editable = true;
   });

   callback(events);
  });
 }

Answer 1

我有办法。

不是将事件处理程序注册到 $scope.uiConfig.calendar.events，而是将相同的函数注册到 $scope.eventSources 数组。像这样：

$scope.eventSources = [getEvents];

只要视图发生变化并且日历需要数据，它就会查看 $scope.eventSources 元素。如果一个元素是一个函数，它将被调用并且结果将显示在日历中。

Answer 2

我们运行在一个项目中遇到了类似的问题，我们的解决方案也是在 eventSource 初始化中将一个空对象放入数组中。

$scope.eventSources = [{}];

Angular ui-调用两次的日历事件函数

Angular ui-calendar events function called twice

javascript

jquery

fullcalendar

angularjs

angular-ui