12

这是一个简化的plunk来说明问题

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

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

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

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

简而言之,我想在双击某物时可视化先前隐藏的输入,并立即获得焦点。需要立即获得焦点,因为输入在失去焦点时被隐藏(我希望用户能够立即编辑输入内容。当用户点击离开时,输入被隐藏)。

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

做我想做的事的角度方式是什么?我什么时候可以确定我的输入会显示出来,什么时候可以focus()有效地调用它?注意:如果我scope.$apply()在关注输入之前使用,我会得到$apply already in progress异常。如果我进行安全申请,将不会给予关注。见plunkr

(ps:我真的很想了解,所以我不会使用自动为我做的伴随库)

4

1 回答 1

14

当您对某些数据绑定变量进行更改并且需要等待相应的渲染发生时,您需要使用著名的setTimeout0(或者在 Angular 中的$timeout服务)。

这是一个 plunkr,展示了如何做到这一点。

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

于 2013-03-25T15:35:11.490 回答