angular.jsのリンクパネル付きのアプリケーション

Question

私はAngularを学んでいますが、私は基本的には大丈夫ですが、私は3つのパネルまたはペインを連結している状況があります。最初のペインからカテゴリを選択し、2番目のペインで製品リストを入力し、3番目のペインに製品の詳細を入力します。

私はここ構造を嘲笑している：https://jsfiddle.net/pbpxexsa/1/

いただきました、これを構築するための最善のアプローチ？

いくつかのルーティングを追加して意味のあるURLを作成しましたが、1つのng-viewしか持てません。

私はui.router見てきました、それは私だけ変更を監視するために、各ペイン、観察者に別のコントローラを持ってもらえ

に合うかもしれないが、私はこれを回避すべきである読んだように、これは見えます。

私はディレクティブの側面が好きで、<product-pane></product-pane>と<product-details></product-details>ディレクティブを提供できますが、それらをリンクする方法がわからないことを理解しています。

私が読んでいる本は、この種のアーキテクチャをカバーしていないようですが、何か明白なものがありませんか？

ありがとうございます。

Answer 1

あなたはこれを少し考えすぎるかもしれないと思います。 3つのパネルがすべて1つのデータグループを表示していますが、各パネルが異なるデータを表示している場合にのみ必要なソリューションを設計しようとしています。 を簡単ににすることができます。

ただ、一般的なモックアップ（作業やテストが、あなたのアイデアを与える必要がありません）：コントローラで

<div class="category-pane"> 
<ul> 
    <li ng-repeat="category in categories" 
     ng-click="setSelectedCategory(category)">{{category.name}}</li> 
</ul> 
</div> 

<div class="products-pane"> 
<ul> 
    <li ng-repeat="product in selectedCategory.products" 
     ng-click="setSelectedProduct(product)">{{product.name}}</li> 
</ul> 
</div> 

<div class="product-details-pane> 
    {{selectedProduct.name}} 
    {{selectedProduct.info}} 
    .... 
</div> 

：

$scope.setSelectedCategory= function(category){ 
    $scope.selectedCategory = category; 
    $scope.selectedProduct = null; //remove whatever was in the product pane 
}; 

$scope.setSelectedProduct= function(product){ 
    $scope.selectedProduct = product; 
};