angularjs:在previously隐藏输入元素的指令设置里面重点 [英] angularjs: setting focus on a previously-hidden input element inside a directive

查看:107
本文介绍了angularjs:在previously隐藏输入元素的指令设置里面重点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这里是一个简化的普拉克说明

我得到了一个角指令,可视化之前,编译一些HTML code。在HTML,还有就是变得可见仅当 scope.isEditShown 的隐伏输入真正

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:

<输入NG秀='isEditShown'类型='文本'值='{{content.name}}'类='title_edit/>

在调用 scope.titleChange 功能时,会出现输入。这个函数(绑定到NG-DBLCLICK指令)只是设置真实的 scope.isEditShown 并试图调用jQuery的焦点()对pviously存储在连接功能的范围与 scope.input = $(input元素($ p $法输入:文本,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();

总之,我想可视化previously隐藏输入东西的时候是双击,并给它当前的工作重点。需要眼前的焦点,因为当它失去焦点输入被隐藏的(我希望用户立刻能够编辑输入的内容。当用户点击了,输入被隐藏)。

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; 执行,输入是不可见的,但(=角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.

什么是角的方式做我想要什么?什么时候我可以肯定,我的输入显示我的时候可以调用焦点()上有效?注意:如果我使用范围$适用()焦点移到输入之前,我将获得 $已经在进行中适用例外。如果我做一个安全的应用,foucus不会给。请参见的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:我真的想了解,所以我不打算用同伴libreries是自动地为我做的)

(ps: I really want to understand, so I'm not gonna use companion libreries that automagically do that for me)

推荐答案

当您更改一些数据绑定变量,你需要等待相应的渲染发生,你需要使用著名的的setTimeout 0(交替角的 $超时服务)。

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.

<一个href=\"http://plnkr.co/edit/N9P7XHzQqJbQsnqNHDLm?p=$p$pview\">http://plnkr.co/edit/N9P7XHzQqJbQsnqNHDLm?p=$p$pview

这篇关于angularjs:在previously隐藏输入元素的指令设置里面重点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆