javascript - Angular - 将父 Controller 注入(inject)多个子指令

Question

我正在尝试根据用户输入更新我的模型。我有几个(数量在 1 到 x 之间变化)在这里标记为 A、B 和 C 的子指令，它们只是同一实体的副本。 Controller 在 MAIN 页面元素(有自己的输入)上定义，然后也注入(inject)到每个子指令中。

到目前为止，问题是所有子指令都共享同一个 Controller 和模型，导致它们的输入相互覆盖。

如果我在每个子指令中单独定义 Controller ，那么在一个 Controller 中收集所有数据就会出现问题。

TL;DR:我不确定如何使用 MAIN 输入元素和子指令(A、B、C)输入元素更新我的模型，同时保持添加/删除 x 个子指令的灵 active 。

我很感激你可能有的任何文章或建议。我也愿意接受另一种方法。

主模板:

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

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

})

创建一个将其模型推送到对象数组的子 Controller :

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