Angular 嵌套控制器访问 ng-repeat 数据答案

【问题标题】：Angular Nested Controllers Access ng-repeat dataAngular 嵌套控制器访问 ng-repeat 数据
【发布时间】：2016-07-21 06:24:42
【问题描述】：

我有两个控制器，一个嵌套在另一个内部，都使用 ng-repeat 来实质上列出相关数据的数组。我想访问子控制器中父控制器的 ng-repeat 中的属性之一。我对 Angular 很陌生，不知道如何让它工作，或者我是否以错误的方式接近它。任何指导都会有所帮助。

HTML

<div class="container" ng-app="myApp">
    <div class="task" ng-controller="TaskController as taskCtl" ng-repeat="task in tasks">
         {{task.name}}
         <ul>
             <li ng-controller="AttachmentController as attachmentCtl" ng-repeat="attachment in attachments">{{attachment.name}}</li>
         </ul>
    </div>
</div>

var app = angular.module('myApp', []);

app.controller('TaskController', ['$scope', function ($scope) {
    $scope.tasks = [{name:'thing1', id: '123456'}, ... ];
}]);

app.controller('AttachmentController', ['$scope', '$http', function ($scope, $http) {
   $scope.attachments = [];

   $scope.init = function init() {
      $http.get('/api/attachments&task_id=' + **HOW_DO_I_GET_TASK_ID_HERE** )
         .then(function(response) {
              $scope.attachments = response.data;
      });
   };

  $scope.init();
}]);

我想加载附件，因为它们与基于任务 ID 的任务相关，用于通过 ng-repeat 进行的给定迭代。不知道我是不是走错了路。

谢谢

【问题讨论】：

既然你用$scope这种东西：ng-controller="TaskController as taskCtl"是不必要的，应该只有ng-controller="TaskController"。
@developer033 谢谢......我不明白为什么/如何使用 $scope 使这变得不必要。你能详细说明一下，或者这两种方法是什么？
看一看：codetunnel.io/angularjs-controller-as-or-scope
@developer033 谢谢，这使整个问题更加清晰。我将两者结合起来，看到它以两种方式完成，但不理解差异。

标签： javascript angularjs

【解决方案1】：

尽管对所有具有给定 ID 的附件使用带有过滤器的 ng-repeat 会更好。从现在开始，您为每个任务迭代调用/api/attachments&task_id。

或者直接在/api/tasks 呼叫上发送附件列表。因此，您可以在循环任务时立即循环它们，而无需在每次迭代时获取它们。

根据您提供的代码可能的解决方案：

<div class="container" ng-app="myApp">
    <div class="task" ng-controller="TaskController as taskCtl" ng-repeat="task in tasks">
         {{task.name}}
         <ul>
             <li ng-controller="AttachmentController as attachmentCtl" ng-repeat="attachment in getAttachments(task.id)">{{attachment.name}}</li>
         </ul>
    </div>
</div>


app.controller('AttachmentController', ['$scope', '$http', function ($scope, $http) {
       $scope.getAttachments = function(id) {
          $http.get('/api/attachments&task_id=' + id)
             .then(function(response) {
                  return response.data;
          });
       };
    }]);

【讨论】：

谢谢。我喜欢你对 /api/tasks 调用的想法。 API 目前不能以这种方式工作，但我可以制作一个相当简单的方法。
如果您可以组合 1 个 API 调用来包含此数据，您将节省速度（因为您一次加载所有数据，没有 1 个休息调用来获取任务，并且对于每个任务另一个 api 调用以获取附件）。如果您需要任何额外的帮助，请告诉我！ :)
是的，这很有意义，可能我接下来要做的事情。

【解决方案2】：

来自子控制器的类似这样的东西应该可以工作： HTML：

<div class="container" ng-app="myApp">
    <div class="task" ng-controller="TaskController" ng-repeat="task in tasks">
         {{task.name}}
         <ul>
             <li ng-controller="AttachmentController" ng-repeat="attachment in fetchAttachments(task)">{{attachment.name}}</li>
         </ul>
    </div>
</div>

JS 子控制器：每次父 ngRepeat 迭代都会调用这个 fetchAttachments。您必须将 Ajax 调用的结果“返回”到此函数才能工作。

$scope.fetchAttachments = function (task) {
    // call ajax 
    // return the result of ajax
}

【讨论】：