angularjs：一個先前隱藏的輸入元件上設置焦點的指令

Here is a simplified plunk to illustrate the problem angularjs：一個先前隱藏的輸入元件上設置焦點的指令

內部我得到的角指令，可視化之前編譯一些HTML代碼。在HTML中，有變得可見只有scope.isEditShown是true的隱伏輸入：

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

調用該函數scope.titleChange時，出現輸入。該功能（結合到NG-DBLCLICK指令）只是設置真實scope.isEditShown並試圖調用jQuery的focus()方法的輸入元件（先前存儲在範圍在連接功能與scope.input = $("input:text", ae);上：

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

總之，我想要在雙擊某個事物時直觀地顯示一個先前隱藏的輸入，並且立即給予焦點，因爲當輸入失去焦點時隱藏輸入（我希望用戶立即能夠編輯輸入內容。當用戶點擊時，輸入被隱藏）

問題是，它似乎我不能把重點放在輸入元素programm atically。經過試驗後，我發現當scope.isEditShown = true;被執行時，輸入還不可見（=角度js沒有在DOM中顯示它），並且將焦點設置爲scope.input.focus();而隱藏輸入什麼也不做。當輸入元素最終顯示時，它沒有重點。

什麼是做我想要的角度方式？我什麼時候可以確定顯示了我的輸入以及何時可以有效地打電話給focus()？注意：如果在使用scope.$apply()之前注重輸入，我會得到$apply already in progress例外。如果我做了一個安全的申請，將不會給予foucus。請參閱the plunkr。

（PS：我真的想了解，所以我不打算用同伴libreries是自動的爲我做的）

來源

2013-03-25 janesconference

你可以把你的代碼放在plunk或jsfiddle中嗎？ – ganaraj 2013-03-25 11:41:04

只用足夠的代碼來表示問題就可以做一個非常簡單的演示，嘗試使用'$ timeout' – charlietfl 2013-03-25 12:42:25

@ganaraj：用plunkr編輯答案。 – janesconference 2013-03-25 14:57:09

當你更改一些數據綁定變量，你需要等待相應的渲染髮生，您需要使用着名的setTimeout 0（在Angular中交替使用$timeout服務）。

這是一個演示如何做到這一點的plunkr。

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

來源

2013-03-25 15:35:11 ganaraj

這確實有效。哲學問題：依靠超時是否正確？我所知道的所有javascript文獻都是在我頭腦中尖叫着「不」。 – janesconference 2013-03-25 15:47:25

Javascript是單線程的。也無法知道渲染階段何時完成。目前唯一可靠的方法是使用一個setTimeout，它基本上告訴javascript「一旦完成所有事情就做到這一點」。當瀏覽器重新繪製完成時，也沒有跨瀏覽器的方式來了解（事件）。所以是的，雖然它看起來像一個黑客，它在很多地方使用。 – ganaraj 2013-03-25 15:50:49

是的，我知道它在多任務合作中像一個流程一樣工作。它是有道理的：由於角度可能不會在其執行堆棧結束前完成，因此它在focus（）調用準備就緒之前完成所有工作。謝謝。 – janesconference 2013-03-25 16:01:05

angularjs：一個先前隱藏的輸入元件上設置焦點的指令

回答

相關問題