Angular:如何使用指令中的表达式通过 id 获取元素? [英] Angular: How to get an element by id with an expression from a directive?
问题描述
前面的问题很大,所以让我们分解一下.我尝试为 实现类似于本机
的行为.我不能嵌套它们,所以我使用这样的样式:
Bulky question ahead so let's break this down. I try to achieve a similar behavior like the native <label>
for <input>
. I can't nest them so I use a style like this:
<input type="checkbox" id="test" />
Some other content...
<label for="test">Lorem ipsum</label>
在我的例子中 是一个自定义指令,而
是一个任意元素.它可能看起来像这样:
In my case <label>
is a custom directive and <input>
is an arbitrary elment. It could look like this:
<p id="test">Some element...</p>
Some other content...
<custom-directive for="test">My directive</custom-directive>
遗憾的是,我的 id
并不是真正静态的.它是一种表达.它可能看起来像这样:
Sadly my id
isn't really static. It is an expression. It could look like this:
<p id="test-{{ foo }}">Some element...</p>
Some other content...
<custom-directive for="test-{{ foo }}">My directive</custom-directive>
现在我的问题:在
内部,我想在 for
属性中配置元素.假设 foo
在
内的 $rootScope
中设置了值 "bar"
I得到 foo-bar
.但是,无论我在哪里尝试(在 compile
、link
、controller
内,有或没有 priority
等.) 特定元素(这里是 <p>
)当时还有 test-{{ foo }}
,所以我得到 null
使用 getElementById
.
Now to my problem: Inside <custom-directive>
I want to get the element configured in the for
attribute. Lets say foo
has the value "bar"
set in the $rootScope
inside <custom-directive>
I get foo-bar
. However no matter where I try it (inside compile
, link
, controller
, with or without a priority
, etc.) the specific element (here <p>
) has still test-{{ foo }}
at that time, so I get null
with getElementById
.
如果元素具有包含表达式的 id
,我如何获取指令之外的元素?
How can I get the element outside the diretive, if it has an id
containing an expression?
这是一个例子:http://jsfiddle.net/cd6uooze/
(注意:在我的实际应用中,这个问题略有不同.我实际上可以 getElementById
从指令中获取正确的元素,即使 id
包含一个表达式.但是,这仅在特定模板位于 $templateCache
内时才有效.我无法在 JSFiddle 中真正分解它,但 JSFiddle 中的示例非常相似.)
(Note: In my real world app this problem is slightly different. I can actually getElementById
the right element from a directive even if it the id
contains an expression. However this works only until the specific template is inside the $templateCache
. I couldn't really break this down in the JSFiddle, but it the example from the JSFiddle is very similar.)
推荐答案
你需要在 $timeout
内编写你的 getElementById 代码
You need to write your getElementById code inside $timeout
检查这个更新的fiddle.
这篇关于Angular:如何使用指令中的表达式通过 id 获取元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!