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

我覺得角UI日曆指令獲得首個觸發， 我怎樣才能使其先獲取數據觸發指令？

Answer 1

您可以在eventSources中指定一個函數，它可以像這樣獲取數據，您必須使用一系列事件調用callback函數。從我自己的fullCalendar和角度體驗

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); 
    }); 
} 

---

旁註：

$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); 

     }); 
    } 



};