我正在使用 Angular-ui 日历来尝试从我的 API 中提取事件。该 API 位于单独的域中,因此我必须使用 jsonp。
我尝试了各种方法来实现此目的,但无法将事件添加到我的日历中。
我建立了一个服务来调用API
angular.module('myapp.services', ['ngResource'])
.factory( 'SurgerySource', ['$resource', function($resource){
return $resource(
'http://api.mydomain.com/calendar.json?callback=JSON_CALLBACK&start=:start&end=:end',
{start:'@start', end:'@end'},
{ jsonp_query: { method: 'JSONP', isArray: true } }
);
}]);
在我的日历的控制器中,我可以直接调用它并获取日历上的事件
angular.module('myapp.schedule', ['ui.calendar', 'ui.bootstrap', 'myapp.services'])
.controller('ScheduleCtrl', function ScheduleCtrl( $scope, SurgerySource ) {
$scope.surgeries = SurgerySource.jsonp_query({
start: 1396162800,
end: 1399791600
});
$scope.uiConfig = { ... };
$scope.eventSources = [$scope.surgeries];
});
这将使用硬编码的日期范围填充日历。我无法找到一种方法来获取日历视图之外的开始和结束范围以供使用,因此我尝试使用调用函数的事件源(根据此处的文档http://angular-ui.github.io/ui-calendar/ http://angular-ui.github.io/ui-calendar/)这从视图中获取日期范围,但我无法将返回的 json 返回到 $scope 中。
$scope.eventSource = function (start, end, callback) {
s = new Date(start).getTime() / 1000;
e = new Date(end).getTime() / 1000;
var eventPromise = SurgerySource.jsonp_query({
start: s,
end: e
});
callback(eventPromise);
};
如果我检查事件 Promise,我会发现它是一个对象,其中包含数据(作为数组?)以及 $promise 对象和 $resolved:
[
0 -> Resource
1 -> Resource
2 -> Resource
$promise -> Object
$resolved -> true
]
但回调不会执行任何操作,并且事件不会放入日历中。
我还尝试将此功能放入配置中的viewRender中。
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header:{
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
viewRender: function(view,element) {
$scope.surgeries = SurgerySource.jsonp_query({
start: view.visStart.getTime()/1000,
end: view.visEnd.getTime()/1000
});
console.log($scope.surgeries);
}
}
};
$scope.surgeries = [];
$scope.eventSources = [$scope.surgeries];
我在日历打开时看到记录的数据,但事件未填充到日历中。
所以我要么需要弄清楚如何从日历视图中获取日期范围,这样我就可以使用我的硬编码方法。
或者我需要弄清楚如何从 Promise(?) 对象中获取资源数据并将其发送到 $scope.eventSources