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

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

本文关键字：指令 一个 是否 ngModel 值传      更新时间：2023-09-26

我正在为一个项目编写多阶段表单。表单是如此巨大（100-150个输入…疯狂…）我想把表单分解为多个指令，我可以随意重复使用。

问题-我想在指令中使用ngModel，并将三个不同的输入绑定到父作用域上的对象。。。但我只能将ng模型传递给一个要绑定的对象！

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

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

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>

如果您只想呈现几个输入，那么：

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

指令中：

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

如果这些字段是以某种方式连接的，并且您将有一些高级验证或类似的smth，那么您可以为ng模型使用复合对象。

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

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

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

return {
    restrict: 'EA',
    scope: {
        models: "=",
    },
    controller:controller , 
    templateUrl:templateUrl
};
相关文章：