javascript - 如何通过多次调用在 Angular JS 服务或 Controller 中构建模型数据？

Question

我需要使用 AngularJS 在页面中显示多次调用 REST 服务器的结果。

第一个调用获取产品的详细信息，该产品本身包含其他产品的 ID。

我想渲染这个产品的详细信息，但我还需要在后面查询每个依赖的产品，并在同一页面上显示每个产品的一些详细信息，按类别划分。

模板代码如下

<div class="span6">
    <div class="well">
        <h2>product details</h2>
    </div>
    <div class="well">
        <h3>{{device.product.brand}} {{device.product.model}}</h3>
        <p>SKU: {{device.product.sku}}</p>

        <div ng-repeat="reltype in ['plan', 'insurance', 'dataallowance']">
            <h3>{{reltype}}</h3>
            <ul>
                <li ng-repeat="rel in relationships | filter: {type:reltype}">
                    <a href="#/product/{{rel.relId}}">{{plan.type}} {{plan.family}}</a>
                    <p> {{plan.marketingMessage}}</p>
                </li>
            </ul>
        </div>
    </div>
</div>

我的app.js:

angular.module('prodcat', ['prodcatServices']).

    config(['$routeProvider', function($routeProvider, $locationProvider) {

        $routeProvider.
            when('/products', {templateUrl: '/prodCatVisualiser/partials/device-list.html', controller: ProductListCtrl}).
            when('/product/:id', {templateUrl: '/prodCatVisualiser/partials/device-detail.html', controller: ProductDetailCtrl}).
            otherwise({redirectTo: '/products'});

    }]);

服务.js:

angular.module('prodcatServices', ['ngResource']).

    factory('Devices', function($resource) {

        return $resource('/prodCatVisualiser/ajax/products');

    })
    .factory('Device', function($resource){

        return $resource('/prodCatVisualiser/ajax/product/:id');

    });

和controllers.js:

"use strict";

function ProductListCtrl($scope,Devices) {
    $scope.devices = Devices.query();
}

function ProductDetailCtrl($scope, $routeParams, Device) {
    $scope.device = Device.get({id: $routeParams.id});
}

我尝试将productDetailCtrl方法更改为如下所示:

function ProductDetailCtrl($scope, $routeParams, Device) {
    var plans = new Array();
    $scope.device = Device.get({id: $routeParams.id}, function($scope, plans) {
        var relationships = $scope.product.relationships;
        for (var i=0; i < relationships.length; i++) {
            var planDetail = Device.get({id: relationships[i].relId}, function($scope, plans){
                plans.push(planDetail);
            });
        }
    });
    $scope.relationships = plans;
}

但无济于事。我似乎无法理解第一次调用导致的辅助服务调用的异步性。

那么 Controller (以及其中的单个函数)是进行所有服务调用并将它们组合在一起的最佳位置吗？

或者当我迭代依赖产品时，模板使用 Controller 或服务进行额外的后端调用是否更好？这似乎违背了 Controller 将模型组合在一起然后将其传递到要渲染的 View 的通常 MVC 范例。但 Angular 是具有异步倾向的 MVC，所以也许不是!

Answer 1

我会在服务中处理这个问题。大致如下:

.factory('Device', function($resource){
    var device = $resource('/prodCatVisualiser/ajax/product/:id');
    for (var rel in device.relationships) {
         rel.data = $resource(/prodCatVisualiser/ajax/product/:id).get({id: rel.relId});
    }
    return device;
});

(警告 - 即兴代码，可能在某个地方包含错误，我还没喝过咖啡......考虑为伪代码)

现在你的 Controller 接收到的内容将经历三种状态:

1. 主要产品数据的 promise
2. 主要产品数据的已履行 promise ，其中包含每个关系产品的待处理 promise 。
3. 完全兑现了 promise ，提供了所有需要展示的产品的数据。

这并没有破坏 MVC，而是支持它。 View 不需要知道需要多个服务器调用来检索这一信息。这实际上取决于您认为在这种情况下“真正的” Controller 是什么。在此布局中，服务的工作是检索相关模型，下游的每个人只需要担心如何处理它。