Угловая - Ввод родительского контроллера в несколько дочерних директив

Question

Я пытаюсь обновить мою модель на основе ввода пользователем. У меня есть несколько (число варьируется от 1 до x) дочерних директив, обозначенных здесь как A, B и C, которые являются только копиями одного и того же объекта. Контроллер определяется элементом MAIN page (который имеет свои собственные входы), а затем также вводится в каждую из дочерних директив.

На данный момент проблема заключается в том, что все дочерние директивы используют один и тот же контроллер и модель, заставляя их входы переопределять друг друга.

Если я определяю контроллер в каждой из дочерних директив индивидуально, возникает проблема сбора всех данных внутри одного контроллера.

TL; Я не уверен, как обновить мою модель с помощью входных элементов MAIN и элементов ввода child (A, B, C), сохраняя при этом гибкость добавления/удаления x числа дочерних директив.

Я ценю любые статьи или предложения, которые у вас могут быть. Я также открыт для альтернативного подхода.

MAIN шаблон:

<div ng-controller="myController as mainCntrl"> 
    <input type="text" ng-model="mainCntrl.formdata.page_title"></input> 
    <div id="container"> 
     <child-directive cntrl="mainCntrl"></child-directive> /*gets added here dynamically*/ 
     <child-directive cntrl="mainCntrl"></child-directive> 
    </div> 
    <button type="submit" ng-click="mainCntrl.submit()">Submit</button> 
</div> 

MAIN контроллер:

 .controller('myController', function ($scope) { 
      this.formdata = { 
       page_title: "", 
       objects: {} 
      }; 
      this.submit = function() { 
       console.log(this.formdata); 
      } 

    }) 

определение директивы Ребенок:

.directive("childDirective", function() { 
     return { 
      restrict: "E", 
      scope: { 
       cntrl: "=" 
      }, 
      templateUrl: 'templateurl', 
     } 
    }) 

директива Детский шаблон:

<div> 
    <input type="text" ng-model="cntrl.formdata.objects.title"></input> 
    <textare ng-model="cntrl.formdata.objects.description"></textarea> 
</div> 

и визуализировать:

Answer 1

Что об этом, просто идея:

Изменение объектов в массив.

.controller('myController', function ($scope) { 
     this.formdata = { 
      page_title: "", 
      objects: [] 
     }; 
     this.submit = function() { 
      console.log(this.formdata); 
     } 

}) 

Создать контроллер ребенка, который толкает его модель в массив объектов:

.directive("childDirective", function() { 
    return { 
     restrict: "E", 
     scope: { 
      cntrl: "=" 
     }, 
     templateUrl: 'templateurl', 
     controller: ChildCntrl, 
     controllerAs: 'vm' 
    } 
}) 

ChildCntrl.$inject = ['$scope']; 
function ChildCntrl($scope) { 
    var vm = this; 
    vm.model = { 
     title: null, 
     description: null 
    }; 
    $scope.cntrl.formdata.objects.push(model); 
} 

Используйте модель в вас Directive Детский шаблон:

<div> 
    <input type="text" ng-model="vm.model.title"></input> 
    <textare ng-model="vm.model.description"></textarea> 
</div>