$resource .then() 收到资源后抛出错误

Question

我正在尝试在收到的 angular $resource 和我的控制器之间添加一个抽象层。我必须执行一些操作，例如过滤，因此我设置了一个服务来执行这些中间函数。

我能够毫无问题地设置第一个资源调用：

/**
 * Get Grid
 *
 * retrieves grid resource and serializes the grid, rows, columns and widgets themselves
 */
this.getGrid = function() {
    var gridResource = new GridResource();
    var response = gridResource.$query();

    var accGrid = new Grid;

    response.then(function(response) {
        angular.forEach(response.grid, function(row) {
            var accRow = new Row;

            angular.forEach(row.columns, function(column) {
                //Setting up new Column
                var accColumn = new Column();
                accColumn.setId(column.id);

                //Setting up new Widget(s)
                var accWidget = new Widget;
                accWidget.setId(column.widget.id);
                accWidget.setName(column.widget.name);
                accWidget.setType(column.widget.type);
                accWidget.setChildren(column.widget.children);
                accWidget.setVars(column.widget.vars);

                accColumn.addWidget(accWidget);
                accRow.addColumn(accColumn);
            });

            accGrid.addRow(accRow);
        });
    });
    return accGrid;
};

这个 returns 具有所有填充部分的 Grid 对象。

然而，当我尝试在不同的端点上执行相同的方法时，Angular 抱怨：

http://puu.sh/eUSbx/3c15a8b13a.png

我在方法中只做到了这一点：

/**
 * Get all Widgets
 *
 * Retrieves all widgets belonging to the route, regardless if they are in the canvas or not
 */
this.getWidgets = function() {
    var widgets = new Array();
    var widgetResource = new WidgetResource();
    var response = widgetResource.$query();


    response.then(function(response) {
        console.log(response);
    });

    return widgets;
};

如果您想了解 $resource 本身：

designService.factory('GridResource', ['$resource',
function($resource){
    return $resource('view/canvas', {},
        {
            query: { method:'GET' },
            save: { method:'POST' }
        });
}]);

designService.factory('WidgetResource', ['$resource',
function($resource) {
    return $resource('view/widget', {},
        {
            query: { method:'GET', isArray: true }
        });
}]);

我是一个 PHP 正在进入前端 JS 奇妙怪异世界的人，并且真的可以使用指针 :sweaty-smile: 谢谢！

** 更新 ** 我已经了解了 Angular 如何使用 then 来捕获错误响应，所以我更新了我的查询：

    widgetResource.$query().then(
        function(response) {
            console.log(response);
        }, 
        function(error) {
            console.log(error);
        }
    );

产生此错误的原因：

http://puu.sh/eUYYx/998c73600a.png

Answer 1

你的代码看起来不错，看看你控制器中的依赖注入。您可能错过了一个或拼写错误？

Answer 2

** 得到答案**

Angular太挑剔了！问题是我试图从一个已经给定的资源对象创建一个新的资源对象。直接将 response 分配给 WidgetResource.query() 的结果就足够了。这可能是因为我有 WidgetResource.query() 有 isArray 属性为真。

/**
 * Get all Widgets
 *
 * Retrieves all widgets belonging to the route, regardless if they are in the canvas or not
 */
this.getWidgets = function() {
    var widgets = new Array();
    //var widgetResource = new WidgetResource();
    var response = WidgetResource.query();

    response.$promise.then(
        function(response) {
            console.log(response);
        }, 
        function(error) {
            console.log(error);
        }
    );

$resource .then() 收到资源后抛出错误

$resource .then() throwing error after receiving the resource

angularjs

angularjs-service

angularjs-resource