在焦点选项卡上打开到 ui-select答案

【问题标题】：Open on focus tabs over to ui-select在焦点选项卡上打开到 ui-select
【发布时间】：2015-08-12 04:15:10
【问题描述】：

我想做一件简单的事情——当有人点击我的 ui-select 时，我希望它自动下拉。不幸的是，当焦点更改为 ui-select 时，ng-focus 似乎没有触发。有解决办法吗？

【问题讨论】：

【解决方案1】：

如果您正在寻找快速解决方法，请尝试以下方法：

app.directive('showOnFocus', function() {
   return {
       restrict: 'A',
       link: function (scope, element) {
           var focused = false, opened = false;
           var select = element.children('.selectize-input');
           var toggleInput = element.find('input')[0];

           var onfocus = function(){
               if(!focused && !opened) {
                  toggleInput.click();
                  opened = focused = true;
               } else if(opened) {
                  opened = false;
               }
           };
           var onhover = function(){
              if(!focused && !opened){
                  toggleInput.click();
                  opened = focused = true;
               };
           };

           var onblur = function(){
              focused = false;
           };
           element.bind('mouseenter', onhover);
           element.bind('click',onblur);
           select.bind('blur', onblur);
           select.bind('focus', onfocus);

           //show on pageload
           onhover(); 
       }
    };
});

并在你的 ui-select 元素中应用指令

<ui-select show-on-focus>..</ui-select>

希望这会有所帮助。

【讨论】：

我已经实施了你的建议，你可以在这里很好plnkr.co/edit/OQ9xs88LbF0itQAdQK62?p=preview 它有点棘手，当它使用选项卡设置焦点时不会下降它只会在你将鼠标悬停在它上面时下降（不经意间）我该怎么办只在它聚焦时才放下？
感谢 Karthik，当我在我的页面上实现相同的代码时，它只会在页面加载时下降一次，但之后它不会下降，即使我将鼠标悬停在 ui-select 上并且我无法在 plnkr 中重现相同的行为...
可以把你的一段代码放在 plnkr 中吗？我想看看你是如何配置 ui-select 的。
好吧，在我花了一些时间弄清楚我发现如果我有 'input' 而不是 '.selectize-input' 那么它工作正常但 plnkr 工作正常 '.selectize-input' 我不知道为什么它不与'.selectize-input'合作
如果我必须在页面加载时删除 ui-select 那么我必须绑定 onload 事件吗？

【解决方案2】：

showOnFocus 指令对我不起作用。我添加了一个额外的输入（隐藏，但不是不可见）成为焦点，并关闭了 ui-select 的 tabindex。

<custom-directive>
  <input class="custom-focuser" tabindex="0" style="left: 10000px"/>
  <ui-select tabindex="-1"/> 
</custom-directive>

然后在自定义指令的链接函数中，我附加了附加输入的焦点事件。

app.directive('customDirective', function () {
  return {
    // ...
    link: function ($scope, el, attrs, ctrl) {
      el.find('.custom-focuser').focus(function (event) {
        //your custom logic here
      });
    }
  };
});

【讨论】：