AngularStrapのツールチップ内の要素にフォーカスを確実に設定するにはどうすればよいですか？

Question

私のチームではAngularStrapを使用して、Angular 1.5アプリにBootstrapモーダル（ポップオーバー、ツールチップなど）を統合しています。残念ながら、私はAngularStrapがそれらを示すファンキーな方法のために、これらのモーダルの内部の要素に確実に焦点を当てることは非常に困難であることを発見しました。このロジックはここに住ん：

// Set the initial positioning. Make the tooltip invisible 
// so IE doesn't try to focus on it off screen. 
tipElement.css({top: '-9999px', left: '-9999px', right: 'auto', display: 'block', visibility: 'hidden'}); 

彼らはその後、いくつかの内部角度requestAnimationFrameのサービスコールバックに応答して見えるようにされています：

https://github.com/mgcrea/angular-strap/blob/b13098d9d658da9408930b25f79182df920718d2/src/tooltip/tooltip.js

は基本的に、すべてのAngularStrapのモーダルが隠された状態で始める

$$rAF(function() { 
    // Once the tooltip is placed and the animation starts, make the tooltip visible 
    if (tipElement) tipElement.css({visibility: 'visible'}); 
    ... 
}); 

残念ながら、これはツールチップのすべてのDOM要素がツールipは通常は表示されず、これらの要素でfocus（）を呼び出そうとすると失敗します。私の経験では、これは断続的に起こることに注意してください（私の時間の約20％）。

私はツールチップ上でアニメーションを無効にしようとしましたが、その場合は隠れた/目に見えるダンス全体をスキップするほどスマートではないようです。私は明らかにスーパーハッキー（例えば、フォーカスを設定しようとする前に任意のタイムアウトを使用）を試すことができますが、より信頼性の高いオプションを探しています。

Answer 1

なぜonShowイベントを使用しないのですか？これは少し間違って書かれていますが、要素をフォーカスするハンドラをbs-on-showに付けることができます。さらにあなたは、ハンドラが一般的な作りfocus-me属性を持つ要素を探して、それを集中することができます：

<div bs-popover 
    data-content='this input should be focused: <input type="text" focus-me>' 
    data-placement="bottom" 
    bs-on-show="setFocus" 
    data-html="true"> 
    click me to show popover 
</div> 

<div bs-tooltip 
    data-title='this input should be focused: <input type="text" focus-me style="color:#000;">' 
    data-placement="bottom" 
    data-trigger="click" 
    bs-on-show="setFocus" 
    data-html="true"> 
    click me to show tooltip 
</div> 

ジェネリックハンドラ

$scope.setFocus = function(e) { 
    e.$element.find('[focus-me]').focus()  
} 

http://plnkr.co/edit/3wTinmNb5zsKnfUZQ9tT?p=preview