[解決済み】Angular JSでコントローラ間のデータを渡す?
質問
商品を表示する基本的なコントローラがあります。
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();
});
関連
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] JavaScriptで2つの数値の間の乱数を生成する
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] Bowerとnpmの違いは何ですか?
-
[解決済み] angular-routeとangular-ui-routerの違いは何ですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] AngularJS コントローラ間のデータ共有
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】node.js TypeError: path must be absolute or specify root to res.sendFile [JSONのパースに失敗しました]。
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】SyntaxError: JSON の位置 1 に予期しないトークン o があります。
-
[解決済み】Redux TypeError: 未定義のプロパティ 'apply' を読み取れない
-
[解決済み】WebSocket接続に失敗しました。WebSocket のハンドシェイク中にエラーが発生しました。予期しない応答コードです。400
-
[解決済み】 Uncaught Reference Error: stLight is not defined (in Chrome only)