Функция углового пользовательского интерфейса вызывается дважды

Я занимаюсь разработкой проекта с AngularJS и использую Angular-UI UI-Calendar. В моем коде я инициализирую модель eventSources для ui-calendar для пустого массива ([]) и устанавливаю ui-config "events events" в пользовательскую функцию. Эта функция делает запрос $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);
  });
 }

Источник

2 ответа

Решение

У меня есть решение.

Вместо регистрации обработчика события в $scope.uiConfig.calendar.events, зарегистрируйте ту же функцию в массиве $scope.eventSources. Как это:

$scope.eventSources = [getEvents];

Всякий раз, когда для просмотра изменений и календаря требуются данные, он просматривает элементы $scope.eventSources. И если элемент является функцией, он будет вызван, и результаты будут показаны в календаре.

Источник

Мы столкнулись с подобной проблемой в проекте, и наше решение было также в инициализации eventSource, помещающей пустой объект в массив.

$ scope.eventSources = [{}];

Источник
Другие вопросы по тегам