在角度 js 中处理来自 $resource 的数据响应

Posted 2023-03-14

【中文标题】在角度 js 中处理来自 $resource 的数据响应

【英文标题】：Handling data response from $resource in angular js

【发布时间】：2013-11-12 06:20:24

【问题描述】：

我有一个带有Laravel 4 和Angular JS 的RESTful 应用程序。

在我的 Laravel 控制器中，

public function index() 

  $careers = Career::paginate( $limit = 10 );

  return Response::json(array(
    'status'  => 'success',
    'message' => 'Careers successfully loaded!',
    'careers' => $careers->toArray()),
    200
  );

还有角脚本，

var app = angular.module('myApp', ['ngResource']);

app.factory('Data', function()
    return 
        root_path: "<?php echo Request::root(); ?>/"
    ;
);

app.factory( 'Career', [ '$resource', 'Data', function( $resource, Data ) 
   return $resource( Data.root_path + 'api/v1/careers/:id',  id: '@id');
]);

function CareerCtrl($scope, $http, Data, Career) 

    $scope.init = function () 
        $scope.careers = Career.query(); 
    ;

在这里，我对处理分配给范围变量的响应数据有点困惑，现在我在$scope.careers 中得到空数组[]。还有我如何处理成功和错误以显示一些类似以下正常$http service的消息，

$scope.init = function () 

    Data.showLoading(); // loading progress
    $http(method: 'GET', url: Data.root_path + 'api/v1/careers').
    success(function(data, status, headers, config) 
        Data.hideLoading();
        $scope.careers = data.careers.data;
    ).
    error(function(data, status, headers, config) 

        if(data.error.hasOwnProperty('message')) 
            errorNotification(data.error.message); 
         else 
            errorNotification();
        

        $scope.careers = [];
    );
;

使用 $resource 在控制台中查看我的请求。

【参考方案1】：

请参阅：http://docs.angularjs.org/api/ngResource.$resource

$scope.init = function () 
    var success = function(careerList, getResponseHeaders)
      $scope.careers = careerList;
    ;
    var failure = function(data)
      // TODO
    ;
    Career.query(success, failure); 
;

由于这个怪癖和其他烦恼，我建议使用 Restangular 而不是默认的 $resource 。它让生活更轻松

【讨论】：

我的第一个问题，为什么我在 $scope.careers 中得到空数组 []？

这不是失败。看屏幕截图，我正在获取所有值，如何将其映射到范围变量？

您是通过 $resource 调用还是通过 $http 调用获得该屏幕截图的？也尝试编辑的新代码。您在回调中获取数据，并且可能会在查询函数返回后运行。

屏幕截图来自 $resource，使用你的代码我也得到了相同的 $scope.careers 和 undefined

【参考方案2】：

试试这个：

app.factory( 'Career', [ '$resource', 'Data', function( $resource, Data ) 
   return $resource( Data.root_path + 'api/v1/careers/:id',  id: '@id', 
    query: 
        isArray: false,
        method: 'GET'
    
   );
]);


Career.query(function(res) 
   $scope.careers = res.careers.data;
, function(error) 
  // Error handler code
); 

【讨论】：

同样在这里挣扎了好几个小时