Yeoman Angular：视图上的多个控制器

Question

我确定我做错了什么，也许尝试在一个视图上插入多个控制器是不好的（至少我觉得它可能不好），但想就更好的方法获得意见。

我的文件布局如下：

app.js

angular
  .module('gemstoreApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'    <---- THIS is where I wish to insert a panelController
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

ma​​in.js

angular.module('gemstoreApp')
  .controller('MainCtrl', function ($scope) {

    var gems = [
      {
        name: 'Gem1',
        price: 2.95,
        soldOut: false,
        images: [
          'img1.png'
        ],
        description: 'Some description'
      }, {
        name: 'Gem2',
        price: 1.00,
        soldOut: true,
        images: [
          'img2.png'
        ],
        description: 'Some tetra description'
      }, {
        name: 'Gem3',
        price: 5.00,
        soldOut: false,
        images: [
          'img3.png'
        ],
        description: 'Some tetra description'
      }
    ]

    $scope.products = gems;

  });

ma​​in.html

    <div>
        <ul>
            <div ng-repeat="product in products">
                <li>
                <p>{{ product.name }} - {{ product.price | currency }} - {{ product.description }}</p>
                <img ng-src="{{ product.images[0] }}" alt="">
                <button ng-hide="product.soldOut" class='btn btn-primary'>Add to Cart</button>
                <button ng-show="product.soldOut" class='btn btn-danger'>Sold Out!!!</button>
                </li>

<!== THE "tab" code from here is dirty .. and I'd like ot move it to its own controller ==>
                <section ng-init="tab = 1"> 
                    <ul class="nav nav-pills">
                        <li ng-class="{ active:tab === 1}"><a href ng-click="tab = 1">Description</a></li>
                        <li ng-class="{ active:tab === 2}"><a href ng-click="tab = 2">Specifications</a></li>
                        <li ng-class="{ active:tab === 3}"><a href ng-click="tab = 3">Reviews</a></li>
                    </ul>
                </section>
                <div id="panel" ng-show="tab == 1">
                    <h4>Description</h4>
                    <blockquote> {{ product.description }} </blockquote>
                </div>
                <div id="panel" ng-show="tab == 2">
                    <h4>Specification</h4>
                    <blockquote>Nothing yet</blockquote>
                </div>
                <div id="panel" ng-show="tab == 3">
                    <h4>Reviews</h4>
                    <blockquote>Nothing yet</blockquote>
                </div>
            </div>
        </ul>
    </div>

我主要是尝试将“选项卡”代码从这里重构到一个单独的控制器 (panelCtrl) 并在这里使用它。所以我可以这样做：

<li ng-class="{ active:panelCtrl.isSelected(1)}"><a href ng-click="panelCtrl.setSelected(1)">Description</a></li>

对于那些熟悉的人，我正在阅读 codeschool 的 Angular 教程，并尝试使用 Yeoman 来完成。

Answer 1

您可以将另一个控制器添加到视图中，方法是将其直接放入 html 文件中，如下所示：<div ng-controller="PanelCtrl as panel">。

但是，也许为您的面板创建指令可能是更好的解决方案？指令可以有控制器。这也可以让您在更多视图中使用您的面板。

在一个视图中拥有多个控制器本身并不是“坏习惯”。但这并不意味着每次都使用多个控制器制作视图是“好习惯”。在这种情况下，将您的面板包装到指令中似乎是最好的。

PS：你使用过 yeoman 的事实没有任何区别 :)。

评论更新：

在决定 Angular 应用程序的结构时，有一些非常好的资源，其中一些答案可以在 AngularJS application file structure 答案中找到。还有这个社区驱动的angular-style-guide。