如何使用jsonp和angular-ui日历

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.

我使用angular-ui日历尝试从API中提取事件。API在一个单独的域中，所以我必须使用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

我构建了一个调用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.

这将使用硬编码的日期范围填充日历。我不能图方法开始和结束日历视图的使用范围,所以我试图使用一个事件源调用一个函数按文档(http://angular-ui.github.io/ui-calendar/)这日期范围的观点,但我不能得到返回的json回美元的范围。

 $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:

如果我检查eventPromise，我看到它是一个带有其中数据(作为数组?)的弹出，旁边是$promise对象和$resolve:

[
  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.

我还尝试将这个函数放到配置中的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];

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

所以我需要找出如何从calendar视图中获取日期范围，这样我就可以使用硬编码方法。或者我需要找出如何从promise(?)对象中获取资源数据并将其发送到$scope.eventSources

1 个解决方案

#1

I got this working by switching to $http instead of building a service. My new eventSource function looks like this

我通过切换到$http而不是构建服务来实现这一点。我的新的eventSource函数是这样的。

$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.

我还必须确保消息源发送的是我的时间戳，而不是日期字符串。

#1