Как я могу создать данные модели в службе Angular JS или контроллере с несколькими вызовами?

Question

Мне нужно показать результаты нескольких вызовов на сервер REST на странице с помощью функции AngularJS.

Первый звонок получает информацию о продукте, который сам содержит идентификаторы других продуктов.

Я хочу отобразить детали этого продукта, но мне также нужно, чтобы каждый из зависимых продуктов запрашивался в обратном порядке и отображал некоторые детали каждого на одной странице, разделенные по категориям.

код шаблона ниже

<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 с асинхронным наклоном, так что, возможно, нет!

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

(предупреждение - от кода манжеты, вероятно, содержит ошибку где-то, у меня не было кофе еще ... считают псевдокод)

Теперь, что ваш контроллер получает будет проходить через три состояния:

1. обещания основных данных продукта
2. выполнивших обещание для основных данных продукта, содержащий ожидающие обещания для каждого из отношений продуктов.
3. Полностью выполненное обещание с данными для всех продуктов, которые необходимо отобразить.

Далеко не нарушая MVC, это поддерживает его. В представлении нет необходимости знать, что для получения этой информации требуется более одного вызова сервера. Это действительно сводится к тому, что вы считаете «реальным» контроллером в этом сценарии. В этом макете задача сервиса заключается в том, чтобы получить соответствующую модель, и все, кто находится ниже по течению, просто должны беспокоиться о том, что с ней делать.