angularjs:将焦点设置在指令中先前隐藏的输入元素上 [英] angularjs: setting focus on a previously-hidden input element inside a directive
问题描述
我得到了一个 angular 指令，它在可视化之前编译了一些 html 代码.在 html 中，有一个隐藏输入，只有当 scope.isEditShown 为 true 时才可见:
I got an angular directive that compiles some html code before visualizing it. In the html, there is an hiden input that becomes visible only if scope.isEditShown is true:
<input ng-show='isEditShown' type='text' value='{{content.name}}' class='title_edit'/>
当调用 scope.titleChange 函数时会出现输入.此函数(绑定到 ng-dblclick 指令)只是将 scope.isEditShown 设置为 true 并尝试调用 jQuery 的 focus() 输入元素上的方法(之前存储在scope.input = $("input:text", ae);:
The input appears when the scope.titleChange function is invoked. This function (bound to an ng-dblclick directive) just sets true to scope.isEditShown and tries to invoke jQuery's focus() method on the input element (previously stored in the scope in the linker function with scope.input = $("input:text", ae);:
scope.isEditShown = true;
scope.input.focus();
简而言之，我想在双击某些内容时可视化先前隐藏的输入，并立即将其聚焦.需要立即获得焦点，因为输入在失去焦点时被隐藏(我希望用户能够立即编辑输入内容.当用户点击离开时，输入被隐藏).
In short, I want to visualize a previously-hidden input when something is double-clicked, and give it immediate focus. The immediate focus is needed because the input is hidden when it loses focus (I want the user to immediatly be able to edit the input content. When the user clicks away, the input is hidden).
问题是我似乎无法以编程方式将焦点放在输入元素上.经过实验，发现当scope.isEditShown = true;执行时，输入还不可见(=angular js在DOM中不显示)，用设置焦点scope.input.focus(); 到一个隐藏的输入什么都不做.当输入元素最终被显示时，它没有被聚焦.
The problem is that it seems I can't give the focus to the input element programmatically.
After experimenting, I found that when scope.isEditShown = true; is executed, the input is not visible yet (= angular js doesn't show it in the DOM), and setting focus with scope.input.focus(); to a hidden input does nothing. When the input element finally gets shown, it's unfocused.
做我想做的事的角度方式是什么?我什么时候可以确定我的输入被显示，什么时候我可以有效地调用 focus() ?注意:如果我在输入焦点之前使用 scope.$apply()，我会得到 $apply already in progress 异常.如果我进行安全申请，则不会获得焦点.请参阅plunkr.
What is the angular way to do what I want? When can I be sure that my input is shown and when can I call focus() on it effectively? NOTE: if I use scope.$apply() before giving focus to the input, I will get $apply already in progress exception. If I do a safe apply, foucus won't be given. See the plunkr.
(ps:我真的很想了解，所以我不会使用自动为我做这件事的伴侣库)
(ps: I really want to understand, so I'm not gonna use companion libreries that automagically do that for me)
推荐答案
当你对一些数据绑定变量进行了更改，并且需要等待相应的渲染发生时，你需要使用著名的setTimeout 0 (或者在 Angular 中的 $timeout 服务).
When you make changes to some data-bound variable and you need to wait for the corresponding rendering to happen, you need to use the famous setTimeout 0 ( alternately in Angular the $timeout service ).
这是一个展示如何执行此操作的 plunkr.
Here is a plunkr that shows how to do this.
http://plnkr.co/edit/N9P7XHzQqJbQsnqNHDLm?p=preview
这篇关于angularjs:将焦点设置在指令中先前隐藏的输入元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
