在 transformResponse 函数中链接 AngularJS 资源调用

Question

我想将 2 个资源调用链接在一起，但不让消耗者看到它 application/controller。

例如：资源 "Person" 有多个 "Role" 记录，但是我想在服务器上将 "Person" 和 "Role" 作为单独的资源保留。

因此，应用程序为人员列表调用 "Person" 资源，但在返回人员之前，资源的 transformReponse 方法为每个人调用 "Roles" 资源并将角色添加为数组。因此，该应用程序只需询问人员并获取所有具有相关角色的人员。

我已尝试在下面列出的示例代码中简化场景。此处应用程序调用 1 个资源，然后调用第 2 个资源，但是来自第 2 个资源的数据在控制器 returns 中调用初始资源后解析。

任何想法如何做到这一点将不胜感激。

angular.module('services', ['ngResource'])
.factory("someService2", function ($resource) {
    return $resource(
        '/', {}, {
        get: {
            method: 'GET',
            transformResponse: function(data, headers){
                        //MESS WITH THE DATA
                        data = {};
                        data.coolThing = 'BOOM-SHAKA-LAKA-V2';
                        return data;
                    }
                }
            }
    );
});

angular.module('services')
.factory("someService", function ($q, $resource, someService2) {
    return $resource(
        '/', {}, {
        get: {
            method: 'GET',
            transformResponse: function(data, headers){

                        data.title1 = "Resource1";
                        var defer = $q.defer();

                        // Call 2nd resource 
                        someService2.get(function(d){
                            data.title2 = d.coolThing;
                            defer.resolve(data);
                        });

                        return defer.promise;
                    }
                }
            }
    );
});

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

app.controller('MainController', ['$scope', 'someService', function ($scope, svc) {

    $scope.title1 = 'Transform Test';
    $scope.title2 = 'Transform Test2';

    var promise = svc.get().$promise.then(function(data){
                      $scope.title1 = data.title1;
                      $scope.title2 = data.title2;
                  });
}]);

HTML很简单：

<html>
<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript" src="http://code.angularjs.org/1.2.0-rc.2/angular-resource.js" ></script>
    <script type="text/javascript" src="JScript.js"></script>
</head>

<body>
<div ng-app="myApp">
    <div ng-controller="MainController">
         <h1>{{title1}}</h1>
         <h1>{{title2}}</h1>
    </div>
<div>

</body>
</html>

Answer 1

我终于得出结论，使用 Resource 的 TransformResponse 函数将无法按要求工作，因为看起来资源对承诺管道中的数据进行了一些外部包装。 IE。 TransformResponse 发生在内部解决承诺之前。

我的最终解决方案是在我自己的对象中简单地抽象资源调用并在此处链接我的承诺。这仍然允许我从控制器中提取嵌套调用，这是我的主要要求。

服务 2：

angular.module('services', ['ngResource'])
.factory("someService2", function ($resource) {
    return $resource(
        '/', {}, {
        get: {
            method: 'GET',
            transformResponse: function(data, headers){
                        //MESS WITH THE DATA
                        data = {};
                        data.coolThing = 'BOOM-SHAKA-LAKA-V2';
                        return data;
                    }
                }
            }
    );
});

Service1，封装嵌套调用：

angular.module('services')
    .factory("someService", function ($q, $resource, someService2) {

    var r = $resource(
        '/', {}, {
        get: {
            method: 'GET',
            transformResponse: function(data, headers){
                        //MESS WITH THE DATA
                        data = {};
                        data.title1 = 'BOOM-SHAKA-LAKA-V1';
                        return data;
                }
            }
        }
    );

    var svc = {
        get: function(){

            var data;

            var defer = $q.defer();

            r.get().$promise.then(
                function(x){

                    data = x;

                    someService2.get().$promise.then(
                        function(y){
                            data.title2 = y.coolThing;
                            defer.resolve(data);
                        }
                    );
                }
            );
            return defer.promise;
        }
    };

    return svc; 
});

控制器：

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


app.controller('MainController', ['$scope', 'someService', function ($scope, svc) {

    $scope.title1 = 'Transform Test';
    $scope.title2 = 'Transform Test2';

    svc.get().then(function(data){
        $scope.title1 = data.title1;
        $scope.title2 = data.title2;        
    });
}]);

HTML:

<html>
<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript" src="http://code.angularjs.org/1.2.0-rc.2/angular-resource.js" ></script>
    <script type="text/javascript" src="http://localhost/Angular/NestedResources/JS.js"></script>
</head>

<body>
<div ng-app="myApp">
    <div ng-controller="MainController">
         <h1>{{title1}}</h1>
         <h1>{{title2}}</h1>
        <pre>
            {{data}}
        </pre>
    </div>
<div>

</body>
</html>

在 transformResponse 函数中链接 AngularJS 资源调用

Chaining AngularJS Resource calls within the transformResponse function

angularjs

angular-resource