如何通过多次调用在Angular JS服务或控制器中构建模型数据

how can I build up model data in Angular JS service or controller with multiple calls?

本文关键字：控制器 构建 数据 模型 服务 JS 何通过 调用 Angular      更新时间：2023-09-26

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

services.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，所以可能不是！

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

.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，反而支持它。视图不需要知道需要多个服务器调用才能检索这些信息。在这种情况下，它实际上可以归结为你认为的"真正"的控制器。在这个布局中，服务的工作是检索相关的模型，而下游的每个人只需要担心如何处理它

相关文章：