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: '/'
      });
  });

main.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;

  });

main.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>

我主要是尝试将 "tab" 代码从此处重构到单独的控制器 (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">.

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

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

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

评论更新：

在为您的 angular 应用程序确定结构时，有一些非常好的资源，一些答案可以在 AngularJS application file structure answers. There is also this community driven angular-style-guide.

中找到

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

Yeoman Angular: Multiple controllers on a view

html

javascript

angularjs

yeoman