Question

我正在研究angular指令，它是一种表单输入类型的小部件。用户使用此输入选择值，我希望结果在ng-model中可用，如下所示：

<mydirective ng-model="mod">
</mydirective>

我听说在Angular 1的新版本中它变得容易多了。

UPD 我看到了similar question，但我认为提出的方式过于过度。发表简短回答我自己的问题，只使用link函数。

Answer 1

我认为我有一种方法可以做到这一点。假设我们需要一个由一个输入和一个下拉列表组成的指令。我想将它用作ng-model的表单输入。连接的结果将被用于ng-model。

我的解决方案是，在我的指令中，我有一堆ng-models，我用范围观看。$ watch。每次更新某些内容时，我都会更新我注入范围的ngModel参数。代码如下所示：

指令：

angular.module('oneClickRegistration')
    .directive('awesomedir', function () {
        var tpl = "<div> \
        <input type='text' ng-model='model.num' size='80' /> \
        <select ng-model='model.unit'> \
            <option value='secs'>Seconds</option> \
            <option value='mins'>Minutes</option> \
            <option value='hours'>Hours</option> \
            <option value='days'>Days</option> \
        </select> \
    </div>";

        return {
            template: tpl,
            restrict: 'E',
            scope: {
                ngModel: '='
            },
            link: function (scope) {
                scope.$watchGroup(['model.num','model.unit'], function(newValues, oldValues, scope){
                    scope.ngModel=newValues[0]+ " " + newValues[1];
                })
            }
        };
    });

在这里我如何使用该指令：

    <awesomedir ng-model="record.dir_res"></awesomedir>

如何在我的自定义输入中支持ng-model（angular directive）

1 个答案: