angularjs:将焦点设置在指令内的先前隐藏的输入元素上

时间:2013-03-25 11:27:43

标签: angularjs angularjs-directive angularjs-scope

Here is a simplified plunk to illustrate the problem

我有一个角度指令,在可视化之前编译一些html代码。在html中,只有当scope.isEditShowntrue时才会显示隐藏输入:

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

调用scope.titleChange函数时会显示输入。此函数(绑定到ng-dblclick指令)只将true设置为scope.isEditShown并尝试在input元素上调用jQuery的focus()方法(之前存储在链接器函数的作用域中scope.input = $("input:text", ae); }:

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

简而言之,我希望在双击某些内容时可视化以前隐藏的输入,并立即对其进行关注。需要立即关注,因为输入在失去焦点时被隐藏(我希望用户立即能够编辑输入内容。当用户点击时,输入被隐藏)。

问题是我似乎无法以编程方式将焦点放在输入元素上。 经过实验,我发现当执行scope.isEditShown = true;时,输入仍然不可见(=角度js不会在DOM中显示),并且将scope.input.focus();的焦点设置为隐藏的输入不会做任何事情。当输入元素最终显示时,它没有聚焦。

做我想要的角度方式是什么?我何时可以确定我的输入是否已显示以及何时可以有效地呼叫focus()?注意:如果我在关注输入之前使用scope.$apply(),我会得到$apply already in progress异常。如果我做了安全的申请,将不会给予补偿。请参阅the plunkr

(ps:我真的很想理解,所以我不会使用自动执行此功能的伴侣文件)

1 个答案:

答案 0 :(得分:14)

当您对某些数据绑定变量进行更改并且需要等待相应的呈现发生时,您需要使用着名的setTimeout 0(在$timeout服务的Angular中交替使用)。

这是一个显示如何执行此操作的plunkr。

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