angularjs - ui-select にフォーカス タブで開く

Question

やりたいことは簡単です。誰かが私の ui-select にタブを移動したときに、それを自動的にドロップダウンさせたいのです。残念ながら、フォーカスが ui-select に変わったときに ng-focus が起動しないようです。回避策はありますか?

Answer 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>

お役に立てれば。

Answer 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
      });
    }
  };
});