带有链接面板的angular.js应用

Question

我正在学习Angular，并且对基础知识还可以，但是我遇到了3个相互链接的面板或窗格的情况。 您从第一个窗格中选择类别，它将在第二个窗格中填充产品列表，然后选择其中一个将在第三个窗格中填充产品详细信息。

我在这里模拟了结构： https : //jsfiddle.net/pbpxexsa/1/

构造此的最佳方法是什么？

我添加了一些路由以具有有意义的网址，但我只能具有一个ng-view。

我看过ui.router，这看起来可能合适

我是否可以在每个窗格上只有一个单独的控制器以及一个观察者来监视更改，但是我已经读过，这是可以避免的。

我喜欢指令的方面，并且了解我可以提供<product-pane></product-pane>和<product-details></product-details>指令，但又不确定如何链接它们。

我正在阅读的书似乎没有涵盖这种体系结构，我是否缺少明显的东西？

提前致谢。

Answer 1

我认为您可能对此略有误解。 您有3个面板，它们都在查看一个数据组，但是您正在尝试设计一种仅在每个面板显示不同数据时才需要的解决方案。 您可以使用单个控制器轻松进行此设计。

只是一个通用模型（无法正常工作或经过测试，但应该可以给您一个想法）：

<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;
};