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
函数时会显示输入。此函数(绑定到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:我真的很想理解,所以我不会使用自动执行此功能的伴侣文件)
答案 0 :(得分:14)
当您对某些数据绑定变量进行更改并且需要等待相应的呈现发生时,您需要使用着名的setTimeout
0(在$timeout
服务的Angular中交替使用)。
这是一个显示如何执行此操作的plunkr。