AngularJSはビューをロードするときに残りの呼び出しから配列を表示しません

Question

私はangularJSを初めて使用していますが、何か小さなものが見つからないかもしれませんが、私は角のフロントエンドのための残りのAPIを提供するスプリングブートバックエンドを持っています。私は工場でngResourseを使用していますが、これは正常に動作するようです。問題は、ビューをロードするとき、アイテムの配列が表示されないとき、私がコントローラに同じデータを再度ロードする関数を作成し、ビューに詳細が表示されるということです。私は関連するコードを含めました。

angular.module('myApp.products.module') 
.controller('productsCtrl', [ 
    '$rootScope', '$log', '$state', '$timeout', '$location', '$mdDialog', '$resource', 'productsFactory', 

    function ($rootScope, $log, $state, 
      $timeout, $location, $mdDialog, $resource, productsFactory) { 

    var scope = this; 

    var init = function() { 
     scope.products = productsFactory.query(); 
     scope.test(1); 
    }; 

    scope.test = function(productId) { 
     scope.oneProduct = productsFactory.get({id: productId}); 
     scope.products = productsFactory.query(/*console.log*/); 
    }; 

    init(); 
}]) 

ここ

されるHTML：：

<div layout="column" ng-cloak> 
<div layout="column"> 
    <div> 
     <md-button class="md-no-focus" ng-click="vm.test(2)">test</md-button> 
     Test Result: {{ vm.oneProduct }} 
    </div> 

    <div> 
     <ul ng-repeat="prod in vm.products"> 
      <li> {{ prod.id }}</li> 
      <li> {{ prod.name }}</li> 
     </ul> 
    </div> 
</div> 

ビュー負荷

ここ

angular.module('myApp.products.module') 

.factory('productsFactory', ['$resource', function($resource) { 
    return $resource('http://localhost:8080/product/findall/:id', {id : '@id'}); 
    }]) 

は（VMなど）コントローラである：ここでは

は私の工場ですoneProductはうまく表示されます。リスト項目は何も表示されませんが、テストボタンを押して再度クエリを呼び出すと、すべて表示されます。どんな助けも大いに受け取ります。

ありがとうございました。

Answer 1

2つの異なるクエリに対して1つのメソッドを使用しようとしているように見えますが、あなたは「findall」と言っていますが、同時にIDを送信する必要があります。私は最良のアイデアがこの方法に分割されていると思う。

//Inject the new service before to use it. 
scope.test = function(productId) { 
     scope.oneProduct = productByIdFactory.get({id: productId}); 
     scope.products = productsFactory.query(/*console.log*/); 
}; 
// Get all products 
.factory('productsFactory', ['$resource', function($resource) { 
    return $resource('http://localhost:8080/product/findall', { 
     listAllProducts: { 
      method: "GET", 
      isArray: true 
     }); 
    }]) 
// Get product by id 
.factory('productByIdFactory', ['$resource', function($resource) { 
    return $resource('http://localhost:8080/product/findById/:id', { 
     listProduct: { 
      method: "GET", 
      params: {id: "@productId"}, 
      isArray: false 
     }); 
    }])