Angular:如何通过id使用指令中的表达式获取元素?

时间:2015-01-16 12:52:11

标签: javascript angularjs angularjs-directive

未来的大问题让我们打破这个问题。我尝试为<label>实现与原始<input>类似的行为。我不能嵌套它们所以我使用这样的样式:

<input type="checkbox" id="test" />
Some other content...
<label for="test">Lorem ipsum</label>

在我的情况下,<label>是自定义指令,<input>是一个任意元素。它看起来像这样:

<p id="test">Some element...</p>
Some other content...
<custom-directive for="test">My directive</custom-directive>

可悲的是我的id并不是真的。这是一种表达方式。它看起来像这样:

<p id="test-{{ foo }}">Some element...</p>
Some other content...
<custom-directive for="test-{{ foo }}">My directive</custom-directive>

现在我的问题:在<custom-directive>内部我希望在for属性中配置元素。假设foo "bar"的{​​{1}}内置$rootScope <custom-directive>,我得foo-bar。无论我在哪里尝试(在compilelinkcontroller内,有或没有priority等)特定元素(此处<p> )那时仍然test-{{ foo }},所以我null获得了getElementById

如果元素包含表达式的id,我怎样才能将该元素置于指向性之外?

以下是一个示例:http://jsfiddle.net/cd6uooze/

(注意:在我的真实世界应用程序中,这个问题略有不同。即使getElementById包含表达式,我实际上也可以id指令中的正确元素。但是这只适用于特定的模板在$templateCache里面。我无法在JSFiddle中真正解决这个问题,但它与JSFiddle的例子非常相似。)

1 个答案:

答案 0 :(得分:3)

您需要在$timeout

中编写getElementById代码

检查此更新的fiddle