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>