Question

我正在努力构建一个AngularJS应用程序，以消除嵌套的子控制器在其父项ng-repeat中的循环。除了Ben Nadel的博客文章，我似乎无法找到一个可靠的答案。

背景 （父级 - >子嵌套控制器）

在下面的示例和Plunker中，我有两个控制器。父文章-Ctrl和嵌套的子项CommentsCtrl嵌套在ArticlesCtrl ng-repeat循环中。

问题 （子控制器在ng-repeat循环内重新加载）

鉴于这种嵌套结构，将为articles数组中的每篇文章加载CommentsCtrl。因此，如果我有n篇文章，我最终会使用CommentsCtrl加载n次。这是一个问题，因为许多模块会抱怨现有的模块实例已经存在。

2潜在解决方案 （Uber Controller或基于对等的控制器与服务）

选项1 - 更简单的两种方法：创建一个优步“厚”的ArticlesCtrl并使用服务来尽可能多地卸载逻辑，例如CommentService，ImageService，DocumentService等。这里的问题是均匀的如果我保持与服务中的所有应用程序逻辑的纯视图控制器关系，我可能最终得到一个相当大的控制器。这也最终破坏了许多S.O.L.I.D原则，因为你现在开始注入民意调查，文档，图像，图表等，并开始变形成为“ContentCtroller”。

选项2 ：将子控制器移动到兄弟控制器，即同一级别的文章和评论，然后管理关系状态，例如评论作为使用服务的文章的孩子？这种方法的问题是你最终会遇到一些开销，并可能失去一些后端数据库关系的简易性，例如：在inLaravel和其他后端代码中，您将使用返回嵌套数据模型的关系创建查询。在兄弟/基于同伴的情况下，我需要解析嵌套数据以分离Angular服务

问题：我做错了什么或错过了替代策略/方法吗？如果我遗漏了一些明显的东西，请道歉。

http://plnkr.co/edit/DXHd6H?p=preview

HTML

  <body>
    <ul class="article-container" ng-controller="ArticlesCtrl">
      <li class="article" ng-repeat="article in articles track by article.id">
        <h3>article from ng-repeat  : ID:  {{ article.id }}    title: {{ article.title }}</h3>
        <div class="comment-ctrl" ng-controller="CommentsCtrl">
          <p class="comment-detail">$scope.comment {{ comment }} AND $scope.counting{{ counting }}</p>
        </div>
      </li>
    </ul>
  </body>

JS 1.4.8

angular.module('articles', ['comments']);
angular.module('comments', []);

(function () {

  'use strict';

  ArticlesCtrl.$inject = ['$scope'];
  function ArticlesCtrl ($scope) {
      $scope.articles = [
          {'id' : 1, 'title' : 'Article 1' },
          {'id' : 2, 'title' : 'Article 2' },
          {'id' : 3, 'title' : 'Article 3'}
        ];
  }

  CommentsCtrl.$inject = ['$scope', 'CounterFactory'];
  function CommentsCtrl ($scope, CounterFactory) {

      $scope.comment = "$scope.comment";
      $scope.counting = CounterFactory.counter();
  }

  CounterFactory.$inject = [];
  function CounterFactory () {
      var service = this,
          counter = 1;

      service.counter = function() {
        return counter++;
      }
      return {
          counter:function () {
            return service.counter();
          }
      }
  }

  angular
    .module('articles')
    .controller('ArticlesCtrl', ArticlesCtrl);

  angular
    .module('comments')
    .controller('CommentsCtrl', CommentsCtrl)
    .factory('CounterFactory', CounterFactory);

})();

AngularJS嵌套控制器在ng-repeat

0 个答案: