javascript - Angular 嵌套 Controller 访问 ng-repeat 数据

Question

我有两个 Controller ，一个嵌套在另一个 Controller 内，两个 Controller 都使用 ng-repeat 来本质上列出相关数据的数组。我想在子 Controller 中访问父 Controller 的 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>

JS

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();
}]);

我想通过 ng-repeat 加载与基于给定迭代的任务 ID 的任务相关的附件。不确定我是否以错误的方式处理这个问题。

谢谢

Answer 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;
          });
       };
    }]);