Угловые Вложенные Контроллеры Доступ к повторным данным

Question

Угловые Вложенные Контроллеры Доступ к повторным данным

0

У меня есть два контроллера, один из которых вложен внутри другого, оба используют 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>

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. Не уверен, что я поступил неправильно.

благодаря

chasingtheflow 21 июль 2016, в 00:15

Источник

0

Так как вы используете $scope такие вещи: ng-controller="TaskController as taskCtl" не нужны, это должен быть только ng-controller="TaskController" .
developer033 20 июль 2016, в 21:50
0

@developer033 developer033 Спасибо ... не уверен, что понимаю, почему / как использование $ scope делает это ненужным. Можете ли вы уточнить это или каковы 2 пути?
chasingtheflow 20 июль 2016, в 22:27
0

Посмотрите: codetunnel.io/angularjs-controller-as-or-scope
developer033 20 июль 2016, в 23:02
0

@developer033 developer033 спасибо, это делает проблему намного яснее. Я объединил оба, увидев, что это сделано в обоих направлениях, но не понимая различий.
chasingtheflow 21 июль 2016, в 12:59

Показать ещё 2 комментария

Теги:

javascript

angularjs

2 ответа

0

Что-то вроде этого от дочернего контроллера должно работать: 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 Child Controller: этот fetchAttachments будет вызываться для каждой итерации родительского ngRepeat. Вам придется "вернуть" результат вызова Ajax этой функции, чтобы он работал.

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

Justin Herter 20 июль 2016, в 18:56

0

Спасибо, что-то в этом роде должно работать :-)
chasingtheflow 20 июль 2016, в 22:22

Ещё вопросы

Так как вы используете $scope такие вещи: ng-controller="TaskController as taskCtl" не нужны, это должен быть только ng-controller="TaskController" .
@developer033 developer033 Спасибо ... не уверен, что понимаю, почему / как использование $ scope делает это ненужным. Можете ли вы уточнить это или каковы 2 пути?
Посмотрите: codetunnel.io/angularjs-controller-as-or-scope
@developer033 developer033 спасибо, это делает проблему намного яснее. Я объединил оба, увидев, что это сделано в обоих направлениях, но не понимая различий.
Спасибо, что-то в этом роде должно работать :-)

daan.desmedt · Accepted Answer · 2016-07-20T19-20-00.000Z

Хотя было бы лучше использовать 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, чтобы также включить эти данные, вы сэкономите на скорости (поскольку вы загружаете все данные за один раз, не имея одного вызова rest для получения задач, и для каждой задачи другой вызов API, чтобы получить вложения ). Дайте мне знать, если вам нужна дополнительная помощь! :)
да, это имеет массу смысла и, вероятно, следующее, что я сделаю.