Angularjs 角度材质md选择以显示焦点下拉列表

我有一个表单，有一堆md选择、文本字段等等。这是一个大表单，用户希望按tab键并在不同的表单字段中导航。当md select通过tab键接收焦点时，它不会显示下拉列表。在这种情况下，需要额外按下向下箭头。是否有任何方法可以让select显示下拉列表，而无需单击鼠标或按下向下键

我尝试将链接函数添加到mdSelect指令中，以注册单击或向下键按下事件，但似乎效果不佳。另外，md autocomplete的外观和感觉完全不同，所以它不与其他输入容器一起使用

此外，还可以使“选择”下拉列表显示在输入区域下方

---

我喜欢代码干净，不喜欢在上面使用任何jquery函数。提前感谢。

这里是结果的屏幕截图：

以下是关键的HTML：

<md-input-container md-no-float flex="30">
  <md-select name="favoriteColor" ng-model="color" placeholder="Pick a Color" 
             ng-init="showOptions=true" 
             my-on-focus="showOptions" 
             md-on-close="showOptions=false">
    <md-option value="red">Red</md-option>
    <md-option value="blue">Blue</md-option>
    <md-option value="green">Green</md-option>
  </md-select>
</md-input-container>

诀窍是在选择关闭时将

showOptions

变量设置为

false

，以便在指令中运行

blur

之前不会再次打开

以下是CSS，可使选择下拉列表显示在输入区域下方：

md-select-menu {
  margin-top: 50px;
}

最后，这是一个正在工作的Plunker

---

希望能有帮助。如果您有任何问题，请告诉我。

感谢Tim Harker的指导

我对指令进行了一些修改，以隐藏公开的范围变量和mdOnClose，以便开发人员可以在一个附加属性中实现它

---

虽然已经回答了，但我更喜欢使用另一种方法来处理装饰器，并希望与大家分享，因为我不太喜欢声明多个指令来控制单个元素的行为

.config(function($provide) {
    $provide.decorator('mdSelectDirective', function($delegate) {
        var directive = $delegate[0];
        var originalController = directive.controller;

        var decoratedController = function($scope, $element){
            $element.bind("keyup", function(ev){
                if ( ev.keyCode == 9 ){ //Tab key code
                    $element.triggerHandler('click');
                }
            });

            originalController($scope, $element);
        }

        directive.controller = decoratedController;

        return $delegate;
    });
})

---

谢谢你的帮助。焦点部分的下拉列表正在工作。我对指令进行了一些修改，以隐藏公开的范围变量和mdOnClose，以便开发人员可以在一个附加属性中实现它。请让我知道这是否是一个正确的方法。然而，css的改变只是在顶部添加了一个边距，所以当我选择其他选项时，下拉列表仍然会覆盖它。

var app = angular.module('app', ['ngMaterial']);
    app.directive('myOnFocus', function() {
        return {
            scope: true,
            restrict: 'A',
            link: function(scope, elem, attr, ctrl) {
                scope.showOptions = true;
                if ((attr['mdOnClose'])) {
                    attr['mdOnClose'] = "showOptions=false;" + (attr['mdOnClose']);
                } else {
                    (attr['mdOnClose']) = "showOptions=false;"
                }

                elem.bind('focus', function() {
                    if (scope.showOptions) {
                        console.log(scope, elem, attr, ctrl)
                        elem.triggerHandler('click');
                    }
                });

                elem.bind('blur', function() {
                    scope.showOptions = true;
                });
            }
        };
    });

.config(function($provide) {
    $provide.decorator('mdSelectDirective', function($delegate) {
        var directive = $delegate[0];
        var originalController = directive.controller;

        var decoratedController = function($scope, $element){
            $element.bind("keyup", function(ev){
                if ( ev.keyCode == 9 ){ //Tab key code
                    $element.triggerHandler('click');
                }
            });

            originalController($scope, $element);
        }

        directive.controller = decoratedController;

        return $delegate;
    });
})