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];

我认为角度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 calendar，$ scope.events仍为未定义

2 个答案: