我如何使用JSONP具有角的UI日历 [英] How do I use jsonp with angular-ui calendar
问题描述
我采用了棱角分明的UI日历，试图从我的API拉事件。 API是一个单独的领域，所以我不得不使用JSONP。
I'm using angular-ui calendar to try and pull events from my API. The API is on a separate domain so I have to use jsonp.
我已经试过各种方式来得到这个工作，但无法获得事件到我的日历。
I've tried various ways to get this working but can't get the events onto my calendar.
我建了一个服务调用API
I built a service to call the 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 } }
);
}]);
在控制器我的日历我可以直接调用它，并获得了日历事件
In the controller for my calendar I can call it directly and get events on the calendar
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];
});
这与填充硬codeD日期范围内的日历。我想不出办法让开始和结束范围到，虽然使用日历视图，所以我试图用调用一个函数（按照此文件的 http://angular-ui.github.io/ui-calendar/ </A>）这会从视图中的日期范围内，但我不能得到返回的JSON回$范围。
This populates the calendar with the hardcoded date range. I couldn't figure a way to get the start and end range out of the calendar view to use though, so I tried to use an event source that calls a function (as per the documentation here http://angular-ui.github.io/ui-calendar/) This gets the date range from the view, but I can't get the returned json back into the $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);
};
如果我检查eventPromise，我看到它是在有数据的下贱（？作为一个数组）沿着一侧的$承诺对象和$解决：
If I inspect eventPromise, I see it is an abject with the data in there (as an array?) along side a $promise object and $resolved:
[
0 -> Resource
1 -> Resource
2 -> Resource
$promise -> Object
$resolved -> true
]
回调没有做任何事情，虽然和事件不会放到日历。
The callback doesn't do anything though and the events are not put onto the calendar.
我也试图把这个功能分为viewRender在config。
I also tried to put this function into viewRender in the config.
$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];
我看日历打开时的数据记录，但该事件不会填充到日历中。
I see the data logged when the calendar opens, but the events are not populated to the calendar.
所以，我要么需要解决如何获得日期范围从日历视图，所以我可以用我的硬盘codeD的方法。
或者，我需要工作，如何获取资源的数据出了承诺（？）的对象，并将其发送到$ scope.eventSources
So I either need to work out how to get the date range out of the calendar view, so I can use my hard coded method. Or I need to work out how to get the resource data out of the the promise(?) object and send it to $scope.eventSources
推荐答案
我通过切换到$ HTTP，而不是构建服务得到了这个工作。我的新的EventSource函数看起来像这样
I got this working by switching to $http instead of building a service. My new eventSource function looks like this
$scope.eventSource = function (start, end, callback) {
var startDate = start.getTime()/1000;
var endDate = end.getTime()/1000;
var url = 'http://api.mydomain.com/app_dev.php/calendar.json?callback=JSON_CALLBACK&start='+startDate+'&end='+endDate;
$http.jsonp(url)
.then(function(response){
callback(response.data);
});
};
我也必须确保我的消息来源是送我的时间戳，而不是日期字符串。
I also had to make sure my source was sending my timestamps rather than date strings.
这篇关于我如何使用JSONP具有角的UI日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
