Question

我正在学习Angular，我对基础知识很满意但是我有一个情况，我有3个相互连接的面板或窗格。您从第一个窗格中选择类别，它会在第二个窗格中填充产品列表，然后选择其中一个产品，在第三个窗格中填充产品详细信息。

我在这里嘲笑了这个结构：https://jsfiddle.net/pbpxexsa/1/

构建这个的最佳方法是什么？

我添加了一些路由以获得有意义的网址，但我只能有一个ng视图。

我看过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;
};

带链接面板

1 个答案: