【问题标题】:Passing custom arguments to $resource and transformResponse将自定义参数传递给 $resource 和 transformResponse
【发布时间】:2014-04-18 21:26:05
【问题描述】:

由于一些特殊情况,我目前正忙于使用 AngularJS 创建一个仅限客户端、无服务器的应用程序。它的唯一目的(目前)是读取一个 .json 文件,其中包含一个 Activity 对象数组,如下所示:

[{
    "id": "sta",
    "title": "IT Strategy & Governance",
    "type": "management",
    "order": 1
},
{
    "id": "por",
    "title": "Portfolio Management",
    "type": "management",
    "order": 2
},
{
    "id": "org",
    "title": "Organization & Process Management",
    "type": "management",
    "order": 3
}]

请记住,此文件是静态的,不是由任何类型的后端生成的。我现在想实现目标。

目标 1 是加载这个完整的对象列表。我使用 Angular $resource 完成此操作,如下所示,它运行良好:

服务:

pexServices.factory('Activities', function($resource) {
    return $resource('data/activities.json', {});
});

控制器:

pexControllers.controller('ActivityCtrl',
    function($scope, Activities) {
        $scope.activities = Activities.query();
    }
);

目标 2 是从这个数组中取出一个单独的记录,通过它的 ID 选择它。和以前一样,数据应该从一个包含所有数据对象的大数据文件中提取出来。

我的想法是在上面已经介绍的 $resource 中添加一个自定义 get 函数,并包含一些提取请求元素的 transformResponse 代码:

pexServices.factory('Activities', function($resource) {
    return $resource('data/activities.json', {}, {
        get: {
        method: "GET",
        transformResponse: function(rawData, headersGetter) {
            var jsonData = jQuery.parseJSON(rawData);
            var requestedObject = jsonData.filter(function(activity) {
                return activity.id == "THEREQUESTEDID";
            });
            return requestedObject.shift();
        }
    }
    });
});

这很好用,但前提是我在 THEREQUESTEDID 处对请求的 ID 进行硬编码。但是,我显然想将一个可变参数传递给 get 函数,以便拉取所需的对象,如下所示:

$scope.activity = Activities.get({activityId: "sta"});

不幸的是,这是我现在被卡住了一段时间的地方。如何使参数从我的控制器一直传递到 transformResponse 函数,我可以在其中使用它来过滤数组?

如前所述,文件本身是静态的,不会对任何参数做出反应,所以我需要在客户端手动进行过滤。

非常感谢您的支持并记住我有限的 JS 技能。 :-)

(如果您对我的问题有其他完全不同的解决方案,请随时分享!这只是我的第一次尝试。)

【问题讨论】:

    标签: javascript angularjs angularjs-resource


    【解决方案1】:

    不是这样!您需要使用方法创建一个服务并将您的资源对象包装在其中。服务应该是这样的

    pexServices.factory('Activities', function ($resource) {
        var service = {};
        var cachedActivities = [];
        service.getAll = function () {
            cachedActivities = $resource('data/activities.json', {});
            return cacheActivities;
        }
        service.getActivity = function (id) {
            var requestedObject = jsonData.filter(function (activity) {
                return cachedActivities.id == id;
            });
            return requestedObject.shift();
        }
        return service;
    });
    

    现在您的服务有 2 种方法,一种用于列表,一种用于特定活动。此外,从服务器检索到的活动缓存在本地变量中。这里唯一的问题是getActivity 仅在您首先调用getAll 时才有效。如果您想修复它,请使用基于 Promise 的方法。

    【讨论】:

    • 非常感谢您的意见。等我的 JS 技术再进步一点,我会再详细考虑!
    猜你喜欢
    • 2018-06-09
    • 2016-01-20
    • 1970-01-01
    • 1970-01-01
    • 2011-11-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多