10

我在 AngularJS 上编写的访问 Tastypie API 的资源很少。一切都很好，除了一个细节：tastepie 总是将实际结果封装在objectsJSON 的属性中，例如：

/api/v1/reminder/：

{
    meta: {
        limit: 20,
        next: null,
        offset: 0,
        previous: null,
        total_count: 3
    },
    objects: [{
        category: {
            color: "#999999",
            id: 1,
            name: "Groceries",
            resource_uri: "/api/v1/category/1"
        },
        description: "",
        due_date: "2010-10-16",
        id: 1,
        repeat: "weekly",
        resource_uri: "/api/v1/reminder/1",
        value: "-50"
    }, {
        category: {
            color: "#999999",
            id: 1,
            name: "Groceries",
            resource_uri: "/api/v1/category/1"
        },
        description: "",
        due_date: "2010-10-17",
        id: 2,
        repeat: "weekly",
        resource_uri: "/api/v1/reminder/2",
        value: "-50"
    }
}

使用回调来修复get()调用很麻烦：

Reminder.get().$then(function (result) {
    $scope.reminders  = result.data.objects;
});

但我知道result.resource是一个实际的Reminder例子。

.factory('Reminder', ['$resource', function($resource){
    var Reminder = $resource('/api/v1/reminder/:id', {}, {
        get: {
            method: 'GET',
            isArray: false
        }
    });

    Reminder.prototype.TESTE = function () {console.log('asd');};

    return Reminder;
}])

现在我需要在我的Reminder类上实现行为，并且我需要我的每个元素meta.objects都是一个实例Reminder：

Reminder.get().$then(function (result) {
    $scope.reminders  = result.data.objects;

    result.resource.TESTE(); // -> outputs 'asd'

    o = result.data.objects[0];
    o.TESTE // -> undefined, obvisously
    i = new Reminder(o);
    i.TESTE() // -> outputs 'asd'
});

那么，我如何让 angularjs 理解每个对象objects都是实际结果，所以它的行为就像一个实例列表？

解决方法是创建一个新列表迭代创建实例的结果，但这不是最佳的......

建议？

@rtcherry 的解决方案：

正如 rtcherry 所建议的，我使用了restangular

配置请求数据的读取：

.config(['RestangularProvider', function(RestangularProvider) {
    RestangularProvider.setBaseUrl("/api/v1");

    RestangularProvider.setResponseExtractor(function(response, operation, what, url) {
        var newResponse;
        if (operation === "getList") {
            newResponse = response.objects;
            newResponse.metadata = response.meta;
        } else {
            newResponse = response.data;
        }
        return newResponse;
    });
}])

加载提醒：

function RemindersCtrl ($scope, $rootScope, Reminder) {
    $scope.reminders = Reminder.getList();
}

将我的自定义方法添加到Reminder（不像 ngResource 那样干净，但可行）：

.factory('Reminder', ['Restangular', '$filter', function(Restangular, $filter){
    var Reminder = Restangular.all('reminder');

    var remainingDays = function () {
        //do stuff
    };

    // adding custom behavior
    Restangular.addElementTransformer('reminder', false, function (reminder) {
        reminder.remainingDays = remainingDays;
        return reminder;
    });

    return Reminder;
}])

@moderndegree 的解决方案：

我用纯ngResource：

var tastypieDataTransformer = function ($http) {
    return $http.defaults.transformResponse.concat([
        function (data, headersGetter) {
            var result = data.objects;
            result.meta = data.meta;
            return result;
        }
    ])
};

...

.factory('Reminder', ['$resource', '$http', function($resource, $http){
    var Reminder = $resource('/api/v1/reminder/:id', {}, {
        query: {
            method: 'GET',
            isArray: true,
            transformResponse: tastypieDataTransformer($http)
        }
    });

    Reminder.prototype.remainingDays = function () {
        // doing stuff
    };

    return Reminder;
}])

我的控制器：

Transaction.query(filter).$then(function (result) {
    $scope.days = [];
    var transactions = result.resource;
    resource[0].remainingDays(); // it works

});
4

3 回答 3

6

如果您想避免使用额外的库，您应该能够执行以下操作：

$resource('/api/v1/reminder/', {}, {
    query: {
        method: 'GET',
        isArray: true,
        transformResponse: $http.defaults.transformResponse.concat([
            function (data, headersGetter) {
                return data.objects;
            }
        ])
    }
});

这会将您的转换附加到$HttpProvider的默认转换器。

注意：如果我在这个问题上错了，请纠正我，但我相信这个功能需要 v1.1.2 或更高版本。

于 2013-06-27T01:02:20.460 回答
4

您可能想尝试类似restangular的东西。

需要一些配置才能使其工作。一个例子是here。

于 2013-06-26T09:48:20.930 回答
3

我最终做了以下操作，以便将meta对象直接保留在返回的结果上Reminder.query()（扩展来自@moderndegree 的答案）。

var Reminder = $resource('/api/v1/reminder/', {}, {
  query: {
    method: 'GET',
    isArray: true,
    transformResponse: $http.defaults.transformResponse.concat([
      function (data, headersGetter) {
          return data.objects;
      }
    ]),
    interceptor: {
      response: function(response) {
        response.resource.meta = response.data.meta;
      }
    }
  }
});

这允许您meta直接在返回的对象上获取值：

var reminders = Reminder.query(...);
console.log(reminders.meta); // Returns `meta` as expected.

我认为也可以在回调中做类似的事情，Reminder.query因为response对象在那里也可用。

于 2014-10-03T20:34:19.030 回答