angularjs: ustawienie ostrości na wcześniej ukryty element wejściowy wewnątrz dyrektywy

Question

Here is a simplified plunk to illustrate the problem

mam kątową dyrektywę, która kompiluje kodu HTML przed wizualizując go. W html, jest Hiden wejścia, który jest widoczny tylko wtedy, gdy scope.isEditShown jest true:

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

wejściowy pojawia się, gdy funkcja scope.titleChange jest wywoływany. Funkcja ta (związany z dyrektywą ng-dblclick) tylko ustawia wierny scope.isEditShown i próbuje wywołać focus() metody jQuery na element wejściowego (poprzednio zapisanego w zakresie, w funkcji łącznika z scope.input = $("input:text", ae);:

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

w skrócie, Chcę wizualizować wcześniej ukryte dane wejściowe po dwukrotnym kliknięciu i natychmiast skupić się na nim Bezpośrednie skupienie jest potrzebne, ponieważ dane wejściowe są ukryte, gdy straci ostrość (chcę, aby użytkownik mógł natychmiast edytować zawartość wejściową Gdy użytkownik kliknie, wejście jest ukryte)

Problem polega na tym, że wydaje mi się, że nie mogę skupić się na programie elementów wejściowych atycznie. Po eksperymentach odkryłem, że po wykonaniu scope.isEditShown = true; dane wejściowe nie są jeszcze widoczne (= kątowe js nie pokazują go w DOM), a ustawienie ostrości z scope.input.focus(); na ukryte wejście nic nie robi. Kiedy element wejściowy zostaje ostatecznie pokazany, jest nieostry.

Jaki jest kątowy sposób robienia tego, co chcę? Kiedy mogę być pewny, że moje wejście jest pokazane i kiedy mogę skutecznie zadzwonić na numer focus()? UWAGA: jeśli użyję scope.$apply() przed skupieniem się na danych wejściowych, otrzymam wyjątek $apply already in progress. Jeśli zrobię bezpieczną aplikację, foucus nie zostanie podany. Zobacz the plunkr.

(ps: Ja naprawdę chcę zrozumieć, więc nie będę użytku towarzyszących libreries że automagicznie zrobić dla mnie)

Answer 1

Po wprowadzeniu zmian do niektórych danych zmiennej związanej i trzeba czekać na Odpowiednie renderowanie się stało, musisz użyć słynnego setTimeout 0 (na przemian w usłudze Angular the $timeout).

Oto plunkr, który pokazuje, jak to zrobić.

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