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">。

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

在一个视图中拥有多个控制器本身不是＆＃34;糟糕的做法＆＃34;。但这并不意味着每次都要用多个控制器来制作视图是好的做法＆＃34;。在这种情况下，似乎将面板包装成指令是最好的。

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

评论更新：

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

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

1 个答案: