AngularJS와 : 지시어

Question

Here is a simplified plunk to illustrate the problem

내부 이전에 숨겨진 입력 요소에 초점을 설정 나는 그것을 시각화하기 전에 약간의 HTML 코드를 컴파일 각도 지시어를 얻었다. 표시되는 HTML에서 scope.isEditShown는 true 경우에만 표시가되는 숨겨진 입력이 :

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

scope.titleChange 함수가 호출 될 때 입력이 나타난다. (AN NG-dblclick 지시자 결합)이 함수는 단지 scope.isEditShown true로 설정하고, 이전 scope.input = $("input:text", ae);와 링커 기능의 범위에 기억 된 입력 요소 (에 jQuery의 focus() 메소드를 호출하려고 : 요컨대

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이야 그 저)

Answer 1

일부 데이터 바인딩 변수를 변경하고 기다릴 필요 해당 렌더링이 발생하려면 유명한 setTimeout 0을 사용해야합니다 (각도는 $timeout 번으로 번갈아 표시).

여기 어떻게하는지 보여주는 plunkr이 있습니다.

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