Question

我想将2个资源调用链接在一起，但是从使用的应用程序/控制器中看不到它。

例如：资源＆＃34;人＆＃34;有多个＆＃34;角色＆＃34;记录，但是我想留下＃34; Person＆＃34;和＃34;角色＆＃34;作为服务器上的独立资源。

因此，应用程序调用＆＃34; Person＆＃34;人员列表的资源但在返回之前，资源的transformReponse方法调用＆＃34;角色＆＃34;每个人的资源，并将角色添加为数组。因此，应用程序只需要求人并让所有人都具有相关角色。

我已尝试简化下面列出的示例代码中的方案。这里应用程序调用1个资源然后调用第二个，但是在调用控制器中的初始资源返回之后，第二个资源的数据将被解析。

任何想法如何做到这一点将非常感激。

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函数将不会按要求工作，因为看起来资源会在promise管道中进一步外部包装数据。即。 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函数

1 个答案: