我有一个基于 AngularJS 的前端，它使用 restangular 从我构建的 Django 后端获取记录。

我正在调用以下客户列表:

var app;

app = angular.module("myApp", ["restangular"]).config(function(RestangularProvider) {
  RestangularProvider.setBaseUrl("http://172.16.91.149:8000/client/v1");
  RestangularProvider.setResponseExtractor(function(response, operation) {
    return response.objects;
  });
  return RestangularProvider.setRequestSuffix("/?callback=abc123");
});

angular.module("myApp").controller("MainCtrl", function($scope, Restangular) {
  return $scope.client = Restangular.all("client").getList();
});

Chrome 使用 HTTP 200 显示后端返回数据:

abc123({
    "meta": {
        "limit": 20,
        "next": "/client/v1/client/?callback=abc123&limit=20&offset=20",
        "offset": 0,
        "previous": null,
        "total_count": 2
    },
    "objects": [{
        "id": 1,
        "name": "Test",
        "resource_uri": "/client/v1/client/1/"
    }, {
        "id": 2,
        "name": "Test 2",
        "resource_uri": "/client/v1/client/2/"
    }]
})

但一旦发生这种情况，我就会在 Chrome 的控制台中看到以下堆栈跟踪:

TypeError: Cannot set property 'route' of undefined
    at restangularizeBase (http://172.16.91.149:9000/components/restangular/src/restangular.js:395:56)
    at restangularizeCollection (http://172.16.91.149:9000/components/restangular/src/restangular.js:499:35)
    at http://172.16.91.149:9000/components/restangular/src/restangular.js:556:44
    at wrappedCallback (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:6846:59)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:6883:26
    at Object.Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:8057:28)
    at Object.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:7922:25)
    at Object.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:8143:24)
    at done (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:9170:20)
    at completeRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:9333:7) angular.js:5754

我在restangular.js中的第395行做了一个断点:

L394    function restangularizeBase(parent, elem, route) {
L395        elem[config.restangularFields.route] = route;

第一次遇到断点时 elem 只是一个对象，route 的值为 client。

第二次打断点elem未定义，route的值为client。

知道为什么 elem 第二次会是未定义的吗？

最佳答案

当请求列表时，Restangular 期望来自服务器的数据是一个简单的数组。但是，如果生成的数据包含有结果元数据(例如分页信息)，它就会分崩离析。

如果您使用的是 Django REST Framework，它将返回像这样包装的结果:

{
    "count": 2,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 1,
            "name": "Foo"
        },
        {
            "id": 2,
            "name": "Bar"
        }
    ]
}

要翻译这个，您需要创建一个响应提取器函数。在模块配置中指定最简单:

angular.module('myApp', ['myApp.controllers', 'restangular']).
config(function(RestangularProvider) {
    RestangularProvider.setBaseUrl("/api");

    // This function is used to map the JSON data to something Restangular
    // expects
    RestangularProvider.setResponseExtractor(function(response, operation, what, url) {
        if (operation === "getList") {
            // Use results as the return type, and save the result metadata
            // in _resultmeta
            var newResponse = response.results;
            newResponse._resultmeta = {
                "count": response.count,
                "next": response.next,
                "previous": response.previous
            };
            return newResponse;
        }

        return response;
    });
});

这会将结果重新排列为一个简单的数组，并带有一个附加属性 _resultmeta，其中包含元数据。 Restangular 将处理数组及其对象，并且您可以在按预期处理数组时访问 _resultmeta 属性。

关于javascript - AngularJS/Restangular routing "Cannot set property ' route' of undefined"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17292164/