CODEWITHSUNDEEP
javascriptangularjs
user1009835
user1009835

Reputation:

Angular - Injecting the parent controller into several child directives

I'm trying to update my model based on user input. I have several (number varies between 1 to x) child directives marked here as A, B, and C that are just copies of the same entity. The controller is defined on MAIN page element (which has its own inputs) and then also injected into each of the child directives.

As of now, the problem is that all the child directives are sharing the same controller and model causing their inputs to override each other.

If I define the controller in each of child directives individually, then there is the problem of collecting all the data inside one controller.

TL;DR: I'm not sure how to update my model with MAIN input elements and the child directive (A, B, C) input elements while keeping the flexibility of adding/removing x number of the child directives.

I appreciate any articles or suggestions that you may have. I'm open to an alternative approach as well.

MAIN template:

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

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

    })

Child directive definition:

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

Child directive Template:

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

And to visualize:

visualization

Upvotes: 2

Views: 1356

Answers (1)

clintsmith
clintsmith

Reputation: 685

What about this, just an idea:

Change objects to an array.

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

})

Create a child controller that pushes it's model to the objects array:

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

Use the model in you Child Directive template:

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

Upvotes: 0

Related Questions