Angular ui 日历，$scope.events 仍未定义

Question

这是我的控制器的样子

    var resource = Restangular.all('api/events/');
        resource.getList().then(function(events){
             $scope.events = events;

       });


$scope.eventRender = function( event, element, view ) {
    element.attr({'tooltip': event.title,
                  'tooltip-append-to-body': true});
    $compile(element)($scope);
};
/* config object */
$scope.uiConfig = {
  calendar:{
    height: 700,
    editable: true,
    header: {
       left: 'prev,next title',
            //center: 'title',
       right: 'month,agendaWeek,'
    },
    eventRender: $scope.eventRender
  }
};

/* event sources array*/
$scope.eventSources = [$scope.events];

我认为 angular ui 日历指令首先被触发，我怎样才能让它先获取数据然后触发指令？

Answer 1

您可以在 eventSources 中指定一个函数来像这样进行抓取，您必须使用事件数组调用 callback 函数。

var resource = Restangular.all('api/events/');

/* event sources array*/
$scope.eventSources = [fetchEvents];

function fetchEvents(start, end, timezone, callback) {
  resource.getList()
    .then(function(events) {
      // do some event processing ?
      callback(events);
    });
}

根据我自己使用 fullCalendar 和 Angular 的经验附注：

$scope.eventRender = function( event, element, view ) {
  element.attr({'tooltip': event.title, 'tooltip-append-to-body': true});
  $compile(element)($scope);
};

这是一个非常大的性能瓶颈，您可能希望避免这种情况。它将为您呈现的每个事件创建一个 dom 节点+逻辑，这可能很多。最好的办法是制作自己的重用相同 dom 元素的工具提示指令，或者使用 title 属性。

Answer 2

请试试这个它应该工作

/* config object */
$scope.uiConfig = {
  calendar:{
    height: 700,
    editable: true,
    header: {
       left: 'prev,next title',
            //center: 'title',
       right: 'month,agendaWeek,'
    },
    eventRender: getEvents
  }
};

$scope.eventSources = [];

function getEvents(callback){
        console.log(from);  // For test purposes

        // Request for data from server and when it comes, call callback to update calendar
          var resource = Restangular.all('api/events/');
        resource.getList().then(function(events){
             $scope.events = events;
             callback(events);

       });
    }



};

Angular ui 日历，$scope.events 仍未定义

Angular ui calendar, $scope.events remains as undefined

fullcalendar

angularjs

angular-ui