Question

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

问题 - 我想在指令中使用ngModel并将三个不同的输入绑定到父范围内的对象...但我只能传递ng-model一个对象来绑定到！

这是我的指令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>

Answer 2

如果您只想渲染多个输入，那么：

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

指令：

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

如果这些字段以某种方式连接，并且您将获得一些高级验证或smth，那么您可以将复合对象用于ng-model。

Answer 3

对于多个输入，您可以传递如下所示的模型数组。

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

在指令中只公开一个变量。

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

将多个ngModel值传递给指令 - 是否可能？

3 个答案: