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

2023-12-25

我正在使用 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/ 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);
 };

如果我检查事件 Promise,我会发现它是一个对象,其中包含数据(作为数组?)以及 $promise 对象和 $resolved:

[
  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


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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 jsonp 与 Angular-ui 日历一起使用 的相关文章

  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • 包含routeChangeSuccess的AngularJS测试控制器

    我正在尝试创建单元测试来测试导航列表控制器 但在创建测试时遇到问题 这是控制器的代码 navListModule controller NavListCtrl scope NavList function scope NavList sco
  • Protractor e2e 测试表头和 , 标签

    我正在使用下表 我想测试每个标签 th td 标签 该标签中的文本以及该文本的计数 HTML 片段 table class table table striped tbody tr th b a Patient Id a b th th b
  • 错误:[$rootScope:infdig] 过滤器中发生了 10 次 $digest() 迭代

    我已尝试了有关此问题的所有答案 但找不到消除此错误的方法 我非常确定这个过滤器函数是导致上述错误的原因 filter collect ingredients function return function input if angular
  • AngularUI 可排序不适用于多个应用程序

    我创建了带有可排序列表的 angularjs 应用程序 我的应用程序可以与其他不同的应用程序一起多次包含在页面中 每个角度应用程序都是独立的用户控制 var myapp angular module myapp ui myapp contr
  • 使用 Jasmine 测试服务功能 POST 响应

    我不完全确定如何执行此操作 但我有一个端点 URL 它是用于登录身份验证的 POST 请求 添加请求负载时 您将获得成功的登录凭据或错误 但是 我似乎在获取响应时遇到问题 这是我的spec file describe Service Aut
  • ngRepeat 中的函数执行过于频繁

    我有三个tabs里面有不同的htmlng include 这些选项卡使用以下方式显示ng repeat 只有一个 HTML 模板包含函数调用 但它执行了 3 次 每个模板执行一次 ng repeat迭代 这里出了什么问题以及如何解决它 va
  • 禁用在 django Rest Framework 中创建嵌套对象

    Hi 你能帮我怎么做吗禁用创建嵌套对象 我有这样的序列化器 员工拥有团队的外键 class TeamSerializer serializers ModelSerializer class Meta model Team fields id
  • 到子级的角度路由 - 来自不同父级的子级

    我正在使用打字稿进行角度路由 但面临一些路由问题 流程似乎是 我真正想做的是通过Child Child2的一部分 其ID为Child1的Child 路由 但它不显示页面 Child1 用于插入 更新的所有路由都驻留在 Child1 中 而
  • 如何发布数组多维角度js

    我在 angularjs 中有一个数组 示例如下 scope order qty 20 scope order adress Bekasi scope order city Bekasi 这个数组可以用这个代码发布 http method
  • Angularjs 范围之外的服务功能

    我在 angularJS 中创建了一个服务 它使用 btford socket io 模块与服务器交互 由于在服务中我已经实现了一些目前在 Angular 内部使用的 API 但为了以后扩展应用程序 我还需要在 Angular 范围之外提供
  • angularjs ng-repeat 在两个级别上但只有一个输出

    我有一个看起来像这样的大物体 scope marketplaces first example second example 我想做的是循环遍历大对象 如下所示 section ul li li ul section 在循环内部 再次循环每
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 获得一次性绑定以适用于 ng-if

    这个问题已经被之前问过 https stackoverflow com questions 23969926 angular lazy one time binding for expressions 但我无法让该解决方案发挥作用 所以我想
  • 如何在没有分页装饰的情况下渲染 ngTable?

    在我的小型 AngularJS 应用程序中 我使用 ngTable 库渲染多个表格 只有一个可以使用分页 其他的内容总是少于一页 每个渲染的 ngTable 似乎都在表格下方添加了 10 25 50 100 选择器 对于我的大多数桌子来说
  • jquery.find() 可以只选择直接子项吗?

    我应该向 jQuery find 提供什么参数来选择元素子元素而不选择其他元素 我不能用 gt 引导选择器 而用 将选择所有后代 而不仅仅是直接子代 我知道 jQuery children 但这是一个库 因此用户能够提供自己的选择器 并且我
  • Angular.js,如何将值从一个组件传递到任何其他组件

    我从 Angular js 开始 所以如果我解释得不够 我会将其添加到问题中 请告诉我 I have A component js A template html B component js B template html A compo
  • 动态img(或视频)标签根本不加载资源,HTTP请求处于“待处理”状态

    我尝试使用以下方法在 Web 应用程序上加载资源时遇到一些问题img or videoHTML 标签 我在我的应用程序中使用 Angular 并动态设置src的参数img标签 使用ng src src 指示 没有那么多图像和资源需要加载 在
  • Android 如何将总天数准确更改为年、月、日?

    我正在做一个应用程序 该应用程序与根据给定的生日日期输入获取一个人的年龄有关 为此 我从下面的代码中获取从该日期到当前日期的总天数 String strThatDay 1991 05 10 SimpleDateFormat formatte
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp

随机推荐