如何将 jsonp 与 angular-ui 日历一起使用 [英] How do I use jsonp with angular-ui calendar
问题描述
我正在使用 angular-ui 日历来尝试从我的 API 中提取事件.API 位于单独的域中,因此我必须使用 jsonp.
我尝试了各种方法来实现这一目标,但无法将活动添加到我的日历中.
我构建了一个调用 API 的服务
angular.module('myapp.services', ['ngResource']).factory('SurgerySource', ['$resource', function($resource){返回$资源('http://api.mydomain.com/calendar.json?callback=JSON_CALLBACK&start=:start&end=:end',{开始:'@start',结束:'@end'},{ jsonp_query: { 方法: 'JSONP', isArray: true } });}]);
在我的日历控制器中,我可以直接调用它并获取日历上的事件
angular.module('myapp.schedule', ['ui.calendar', 'ui.bootstrap', 'myapp.services']).controller('ScheduleCtrl', function ScheduleCtrl( $scope, SurgerySource ) {$scope.surgeries = SurgerySource.jsonp_query({开始:1396162800,结束:1399791600});$scope.uiConfig = { ... };$scope.eventSources = [$scope.surgeries];});
这会使用硬编码的日期范围填充日历.我无法找到一种方法来从日历视图中获取开始和结束范围以供使用,因此我尝试使用调用函数的事件源(根据此处的文档 http://angular-ui.github.io/ui-calendar/) 这从视图中获取日期范围,但是我无法将返回的 json 放回到 $scope 中.
$scope.eventSource = 函数(开始、结束、回调){s = 新日期(开始).getTime()/1000;e = 新日期(结束).getTime()/1000;var eventPromise = SurgerySource.jsonp_query({开始: s,结束:e});回调(事件承诺);};
如果我检查 eventPromise,我会发现它是一个带有数据的对象(作为数组?),旁边还有一个 $promise 对象和 $resolved:
<预><代码>[0 ->资源1 ->资源2 ->资源$promise ->目的$已解决 ->真的]回调不会做任何事情,事件也不会被放到日历上.
我也试过把这个函数放到配置中的 viewRender 中.
$scope.uiConfig = {日历:{高度:450,可真实,标题:{左:'标题',中央: '',右:'今天上一个,下一个'},事件点击:$scope.alertOnEventClick,视图渲染:函数(视图,元素){$scope.surgeries = SurgerySource.jsonp_query({开始:view.visStart.getTime()/1000,结束:view.visEnd.getTime()/1000});控制台日志($scope.surgeries);}}};$scope.surgeries = [];$scope.eventSources = [$scope.surgeries];
我看到日历打开时记录的数据,但事件未填充到日历中.
所以我要么需要弄清楚如何从日历视图中获取日期范围,这样我就可以使用我的硬编码方法.或者我需要弄清楚如何从 promise(?) 对象中获取资源数据并将其发送到 $scope.eventSources
我通过切换到 $http 而不是构建服务来解决这个问题.我的新 eventSource 函数看起来像这样
$scope.eventSource = 函数(开始、结束、回调){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(功能(响应){回调(响应数据);});};
我还必须确保我的消息来源发送的是我的时间戳而不是日期字符串.
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.
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];
});
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);
};
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.
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.
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
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 与 angular-ui 日历一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!