如何在我的自定义输入中支持 ng-model（角度指令）

Question

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

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

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

UPD 我看到了similar question，但我认为所提出的方式过于工程化。发布了对我自己的问题的简短回答，该问题仅使用 link 函数。

Answer 1

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

我的解决方案是，在我的指令中，我有一堆 ng 模型，我用 scope.$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>