Angular - 將父控制器注入多個子指令

Question

我正嘗試根據用戶輸入更新我的模型。我有幾個（數字在1到x之間變化）的子指令在這裏標記爲A，B和C，它們只是同一個實體的副本。控制器在MAIN頁面元素（它有自己的輸入）上定義，然後也注入到每個子指令中。

截至目前，問題是所有的子指令都共享相同的控制器和模型，導致它們的輸入相互覆蓋。

如果我在每個子指令中分別定義控制器，那麼存在收集一個控制器內所有數據的問題。

TL; DR：我不確定如何使用MAIN輸入元素和子指令（A，B，C）輸入元素更新我的模型，同時保持添加/移除x個子指令的靈活性。

我很欣賞您可能擁有的任何文章或建議。我也接受另一種方法。

主要模板：

<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> 

主控制器：

 .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); 
} 

使用該模型在你孩子指令模板：

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