如何将 jsonp 与 angular-ui 日历一起使用

Posted 2023-03-03

【中文标题】如何将 jsonp 与 angular-ui 日历一起使用

【英文标题】：How do I use jsonp with angular-ui calendar

【发布时间】：2014-06-14 13:27:53

【问题描述】：

我正在使用 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/）这将获取日期范围从视图来看，但我无法将返回的 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);
 ;

如果我检查 eventPromise，我发现它是一个可怜的对象，其中的数据（作为一个数组？）以及一个 $promise 对象和 $resolved：

[
  0 -> Resource
  1 -> Resource
  2 -> Resource
  $promise -> Object
  $resolved -> true
]

回调没有做任何事情，事件也没有放在日历上。

我也试过把这个函数放到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];

我看到日历打开时记录的数据，但事件未填充到日历中。

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

【参考方案1】：

我通过切换到 $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);
        );
;

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