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

Question

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

我有一个角度指令,在可视化之前编译一些HTML代码.在html中,有一个hiden输入只有在以下scope.isEditShown情况下才可见true:

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

scope.titleChange调用函数时会显示输入.这个函数(绑定到ng-dblclick指令)只是设置为true scope.isEditShown并尝试focus()在input元素上调用jQuery的方法(以前存储在链接器函数的作用域中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异常.如果我做了安全的申请,将不会给予补偿.看看plunkr.

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

Answer 1

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

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

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