1

我需要使用 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;
}

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

那么控制器（和其中的一个函数）是进行所有服务调用并将它们放在一起的最佳位置吗？

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

4

1 回答 1

0

我会在服务中处理这个。类似于以下内容：

.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;
});

（警告 - 袖口代码，可能在某处包含错误，我还没有喝咖啡......考虑作为伪代码）

现在您的控制器接收到的内容将经历三种状态：

  1. 主要产品数据的承诺
  2. 主要产品数据的已履行承诺，包含每个关系产品的未决承诺。
  3. 一个完全兑现的承诺，包含所有需要展示的产品的数据。

这远非破坏 MVC，而是支持它。视图不需要知道检索此信息需要多次服务器调用。在这种情况下，它真的归结为您认为是“真正的”控制器。在这个布局中，检索相关模型是服务的工作，而下游的每个人只需要担心如何处理它。

于 2013-06-28T12:46:23.217 回答