CODEWITHSUNDEEP
javascripthtmlangularjs
nadavmor123
nadavmor123

Reputation: 5

passing multiple ngModel values to a directive - is it possible?

i'm working on a multi-stage form for a project . the form is so massive (100 - 150 inputs... insane...) i want to break the form down to multiple directives that i can re-use as i please .

the problem - i want to use ngModel inside the directive and bind three different inputs to an object on the parent's scope... but i can only pass ng-model one object to bind to!

here is my directive html: the directive is simply sitting inside a huge form , but the inputs are inside the directive itself..

<prefered-time
      ng-model="object"
      data="somedata"
      >

</prefered-time>

here is my directive template:

<div class="col-md-3 no_padding">
    today only?
    <md-checkbox 
        ng-model="ngModelone"
        aria-label="Checkbox 2"
        ng-true-value="'yes'"
        ng-false-value="'no'">
    </md-checkbox>
</div>
<div class="col-md-3 no_padding">
    today only?
    <md-checkbox 
        ng-model="ngModeltwo"
        aria-label="Checkbox 2"
        ng-true-value="'yes'"
        ng-false-value="'no'">
    </md-checkbox>
</div>
<div class="col-md-3 no_padding">
    today only?
    <md-checkbox 
        ng-model="ngModelthree"
        aria-label="Checkbox 2"
        ng-true-value="'yes'"
        ng-false-value="'no'">
    </md-checkbox>
</div>

here is my directive:

    var  templateUrl = '/web/views/preferedtime.html' ,
            //template = '<div> <input type="input" ng-model="ngModel"> </div>',

            controller = ['$scope' , function($scope){

            init();

            function init(){
            }

        }];

        return {
            restrict: 'EA',
             require : 'ngModel',
            scope: {
                ngModel: "=",
            },
            controller:controller , 
            templateUrl:templateUrl
        };
    };

Upvotes: 0

Views: 6088

Answers (3)

potatopeelings
potatopeelings

Reputation: 41065

You can pass in an object to the directive's ng-model and then in your template, use the properties of that object, like so

angular.module('myApp', [])
    .directive('parent', function () {
        return {
            restrict: 'E',
            template: '<input ng-model="ngModel.one" /><input ng-model="ngModel.two" />',
            scope: {
                ngModel: "="
            }
        };
    })
    .controller('ctrlr', function ($scope) {
        $scope.obj = {}
    });

with HTML

<div ng-app="myApp">
    <div ng-controller="ctrlr">
        {{ obj }}
        <parent ng-model="obj"></parent>
    </div>
</div>

Upvotes: 2

ngLover
ngLover

Reputation: 4578

For multiple Input you can pass an array of models like below.

<prefered-time models="[ngModelone,ngModeltwo,ngModelthree]">
</prefered-time>

In Directive expose just one variable.

return {
    restrict: 'EA',
    scope: {
        models: "=",
    },
    controller:controller , 
    templateUrl:templateUrl
};

Upvotes: 0

Petr Averyanov
Petr Averyanov

Reputation: 9476

If you just want to render several inputs, then:

<prefered-time modelone="ngModelone" modeltwo="ngModeltwo" modelthree="ngModelthree">
</prefered-time>

In directive:

return {
    restrict: 'EA',
    scope: {
        modelone: "=",
        modeltwo: '=',
        modelthree: '='
    },
    controller:controller , 
    templateUrl:templateUrl
};

If this fields are somehow connected and you going to have some advanced validation or smth like this, then you can use composite object for ng-model.

Upvotes: 1

Related Questions