javascript - 将多个 ngModel 值传递给指令 - 可能吗？

Question

我正在为一个项目制作多阶段表单。该表单是如此之大(100 - 150 个输入...疯狂...)我想将表单分解为多个指令，以便我可以随意重复使用。

问题 - 我想在指令内使用 ngModel 并将三个不同的输入绑定(bind)到父级作用域上的一个对象...但我只能传递 ng-model 一个要绑定(bind)的对象!

这是我的指令 html:该指令只是位于一个巨大的表单内， 但输入位于指令本身内部..

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

</prefered-time>

这是我的指令模板:

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

这是我的指令:

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

Answer 1

您可以将对象传递给指令的 ng-model，然后在模板中使用该对象的属性，如下所示

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

使用 HTML

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