非同期の角度/ノード$スコープの呼び出し

Question

ここの角度には本当に新しいです。私はいくつかの助けが必要な問題があります。基本的には、ユーザーがクリックできるアイテムを選択する必要があります。アイテムがクリックされると、アイテムの説明などのプロパティの一部がページに表示される必要があります。最初の部分は問題ありませんが、データを表示している2番目の部分に問題があります。

フロントエンドには

が、私はそののparamaterとしてクリックitemを取り、角NGクリックchooseItem(item)機能を持っています：だから、ここで私が持っているものである。これは、その後items工場に渡され

<div ng-repeat="item in items" class="col-xs-2 col-md-1"> 
    <div ng-click="chooseItem(item)" class="thumbnail"> 
     <img src="/images/items/{{item.name}}.png"/> 
    </div> 
</div> 

items.getChosenItemData(item)機能を介して。実アイテムデータはMongoに保存され、ファクトリには保存されないため、この関数はdbにクエリしてアイテムデータを取得します。この取り出されたデータは、chosenItemオブジェクトに格納され、その後、$scope.chosenItemとしてコントローラに戻されます。

app.factory('items', ['$http', function($http){ 
    var objects = { 
     items: [ 
      // ... more items before these 

      {name: "Pencil"}, 
      {name: "Pen"} 
      /* I use these item objects as keys to the items themselves. 
       The ng-repeat iterates through all of the names for each item 
       which allows me to display static images for each item to the page. 
       There aren't many items, about 100, but they have tons of json information 
       so to hardcode it all into here is not an option 
       A way to do this without any hardcoding would be nice! */ 

      // more items after these 

     ], 

     // this is used to store a currently clicked item's values 
     chosenItem: null 

    } 

    objects.getChosenItemData = function(name){ 
     return $http.get('/items/' + name).success(function(data){ 
      // console.log(data); 
      angular.copy(data, objects.chosenItem); 
      console.log("Chosen Item: ", objects.chosenItem); 
     }) 
    } 
    return objects 
}]); 
app.controller('MainCtrl', [ 
    '$scope', 
    'items', 
    function($scope, items){ 
     $scope.items = items.items; 
     $scope.chosenItem = null; 

     $scope.chooseItem = function(item){ 
      items.getChosenItemData(item.name); 
      $scope.chosenItem = items.chosenItem; //chosen item object attribute in factory 
      console.log("$scope item: ", $scope.chosenItem); 
     } 
    } 
}); 

これはほとんどすべての作品です。私はクリックされたアイテムのデータを正常にクエリすることができますが、それを返すことは別の話です。最初のクリックで、$scope.chosenItemの値はnullです。次に、2回目のクリック時に、クリックアイテムの値が保存されます。これはまた、n個のアイテムをクリックすると、現在のアイテムではなく、n-1アイテムの値が常に格納されるという問題を引き起こします。最初のクリックにはクリックされたアイテムの値を格納する必要があります。

私はここにどこかでコールバックを追加する必要があると感じていますが、私はAngular/JSを初めて使っているので、どこに行くべきか分かりません。

ありがとうございました！また、角のあるデザインパターンのヒントやリードは、これが非常に単純なようなものの恐ろしい実装であるという気持ちがあるので、大変感謝しています。

$scope.serviceItem = items; 

をして、あなたはそのようなビューでそれを呼び出すことができます：

Answer 1

私はあなたが直接サービスを公開することをお勧め

{{serviceItem.chosenItem}} 

それは、常に最新のクリックされた値に更新されます。

私はそれが役に立ちそうです。