如何使用jsonp和angular-ui日曆

我正在使用angular-ui日曆來嘗試從我的API中提取事件。該API在一個單獨的域名，所以我必須使用jsonp。如何使用jsonp和angular-ui日曆

我試過各種方式來獲得這項工作，但不能把事件到我的日曆上。

我建了一個服務調用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，我看到它是在有數據的下賤（？作爲一個數組）沿着一側的$承諾對象和$解決：

[ 
    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

來源

2014-04-28 mike

我通過切換到$ 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); 
     }); 
};

我也必須確保我的消息來源是送我的時間戳，而不是日期字符串。

來源

2014-05-10 19:53:16 mike

如何使用jsonp和angular-ui日曆

回答

相關問題