angularjs: thiết lập tập trung vào một yếu tố đầu vào trước đó ẩn bên trong một chỉ thị

Question

Here is a simplified plunk to illustrate the problem

tôi nhận được chỉ thị góc mà biên dịch một số mã html trước khi hình dung nó. Trong html, có một đầu vào hiden đó trở nên rõ ràng chỉ khi scope.isEditShown là true:

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

Các đầu vào xuất hiện khi chức năng scope.titleChange được gọi. Chức năng này (liên kết với một chỉ thị ng-dblclick) chỉ đặt đúng với scope.isEditShown và cố gắng gọi phương thức focus() jQuery trên các yếu tố đầu vào (trước đây được lưu trữ trong phạm vi trong hàm mối liên kết với scope.input = $("input:text", ae);:

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

Nói tóm lại, Tôi muốn hình dung một đầu vào được ẩn trước đó khi có thứ gì đó được nhấn đúp và tập trung ngay lập tức. Khi người dùng nhấp chuột đi, đầu vào bị ẩn)

Vấn đề là có vẻ như tôi không thể tập trung vào chương trình phần tử đầu vào về cơ bản. Sau khi thử nghiệm, tôi thấy rằng khi scope.isEditShown = true; được thực hiện, đầu vào không hiển thị (= js góc không hiển thị nó trong DOM) và đặt tiêu điểm với scope.input.focus(); thành đầu vào bị ẩn sẽ không làm gì. Khi phần tử đầu vào cuối cùng được hiển thị, nó không tập trung.

Cách góc cạnh để thực hiện những gì tôi muốn là gì? Khi nào tôi có thể chắc chắn rằng đầu vào của tôi được hiển thị và khi nào tôi có thể gọi focus() trên thiết bị đó một cách hiệu quả? LƯU Ý: nếu tôi sử dụng scope.$apply() trước khi tập trung vào đầu vào, tôi sẽ nhận được $apply already in progress ngoại lệ. Nếu tôi áp dụng an toàn, foucus sẽ không được cung cấp. Xem the plunkr.

(ps: Tôi thực sự muốn hiểu, vì vậy tôi sẽ không sử dụng libreries đồng hành mà Automagically làm điều đó đối với tôi)

Answer 1

Khi bạn thực hiện thay đổi đối với một số biến dữ liệu ràng buộc và bạn cần phải chờ đợi hiển thị tương ứng xảy ra, bạn cần sử dụng số setTimeout 0 nổi tiếng (luân phiên trong dịch vụ $timeout góc).

Đây là một plunkr cho thấy cách thực hiện việc này.

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