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>

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

在您的儿童指令模板中使用该模型：

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

Angular - 将父控制器注入多个子指令

1 个答案: