12

これは問題を説明するための簡略化されたプランクです

視覚化する前にいくつかのhtmlコードをコンパイルするAngularディレクティブを取得しました。htmlには、次の場合にのみ表示される非表示の入力がありscope.isEditShownますtrue

<input ng-show='isEditShown' type='text' value='{{content.name}}' class='title_edit'/>

scope.titleChange関数が呼び出されると、入力が表示されます。この関数(ng-dblclickディレクティブにバインドされている)は、trueを設定し、入力要素(以前はリンカー関数のスコープに次のように格納されていた)でscope.isEditShownjQueryのメソッドを呼び出そうとします。focus()scope.input = $("input:text", ae);

scope.isEditShown = true;
scope.input.focus();

つまり、何かをダブルクリックしたときに以前に隠されていた入力を視覚化し、すぐにフォーカスを与えたいのです。入力がフォーカスを失うと非表示になるため、即時フォーカスが必要です(ユーザーが入力コンテンツをすぐに編集できるようにしたい。ユーザーがクリックすると入力が非表示になります)。

問題は、プログラムで入力要素に焦点を当てることができないように見えることです。実験した後、scope.isEditShown = true;実行されたとき、入力はまだ表示されておらず(= angle jsはDOMに表示されません)、scope.input.focus();非表示の入力にフォーカスを設定しても何も起こりません。入力要素が最終的に表示されるとき、それは焦点が合っていません。

私がやりたいことをするための角度のある方法は何ですか?入力が表示されていることを確認できるのはいつですか。またfocus()、効果的に呼び出すことができるのはいつですか。注:scope.$apply()入力にフォーカスを与える前に使用すると、$apply already in progress例外が発生します。安全に応募すると、フーカスは出ません。plunkrを参照してください。

(ps:私は本当に理解したいので、自動的にそれを行うコンパニオンライブラリを使用するつもりはありません)

4

1 に答える 1

14

データにバインドされた変数に変更を加え、対応するレンダリングが行われるのを待つ必要がある場合は、有名なsetTimeout0を使用する必要があります(Angularでは$timeoutサービス)。

これを行う方法を示すプランカーがあります。

http://plnkr.co/edit/N9P7XHzQqJbQsnqNHDLm?p=preview

于 2013-03-25T15:35:11.490 に答える