1. ホーム
  2. ジャバスクリプト

[解決済み】Angular JSでコントローラ間のデータを渡す?

2022-04-16 09:26:15

質問

商品を表示する基本的なコントローラがあります。

App.controller('ProductCtrl',function($scope,$productFactory){
     $productFactory.get().success(function(data){
           $scope.products = data;
     });
});

私のビューでは、この製品をリストで表示しています。

<ul>
    <li ng-repeat="product as products">
        {{product.name}}
    </li>
</ul

商品名をクリックすると、カートという名前の別のビューに商品が追加されるようにしたいのです。

 <ul class="cart">
      <li>
          //click one added here
      </li>
      <li>
          //click two added here
      </li>
 </ul>

ここで疑問なのは、クリックされた商品を最初のコントローラから2番目のコントローラにどのように渡すかということです。

私はディレクティブを使ってクリックイベントを処理しています。また、私は上記の機能を達成するためにサービスを使用する必要があると感じていますが、どのように把握することができますか? カートは、ユーザーがどのページにいるかによって追加された製品の数が5/10になる可能性があるため、事前に定義されたものです。だから私はこの汎用性を維持したいと思います。

更新しました。

ブロードキャストするサービスを作成し、2つ目のコントローラでそれを受信しています。さて、問題はどうやってdomを更新するかです。製品をドロップするリストはかなりハードコードされているので。

解決方法は?

説明からすると、サービスを利用した方が良さそうですね。確認する http://egghead.io/lessons/angularjs-sharing-data-between-controllers AngularJS サービス コントローラ間のデータの受け渡し をクリックして、いくつかの例をご覧ください。

商品サービスを(ファクトリーとして)このように定義することができます。

app.factory('productService', function() {
  var productList = [];

  var addProduct = function(newObj) {
      productList.push(newObj);
  };

  var getProducts = function(){
      return productList;
  };

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

サービスを両方のコントローラに依存注入します。

において ProductController で、選択したオブジェクトを配列に追加するアクションを定義します。

app.controller('ProductController', function($scope, productService) {
    $scope.callToAddToProductList = function(currObj){
        productService.addProduct(currObj);
    };
});

あなたの CartController のように、サービスから製品を取得します。

app.controller('CartController', function($scope, productService) {
    $scope.products = productService.getProducts();
});