Angular：如何使用指令中的表达式通过 id 获取元素？答案

【问题标题】：Angular: How to get an element by id with an expression from a directive?Angular：如何使用指令中的表达式通过 id 获取元素？
【发布时间】：2015-01-16 12:52:11
【问题描述】：

前面的问题很大，所以让我们分解一下。我尝试为<input> 实现类似于原生<label> 的类似行为。我不能嵌套它们，所以我使用这样的样式：

<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 在$rootScope 内部<custom-directive> 中具有值"bar"set，我得到foo-bar。但是，无论我在哪里尝试（在compile、link、controller 内部，有或没有priority 等），特定元素（这里是<p>）当时仍然有test-{{ foo }}，所以我得到null 和getElementById。

如果元素有一个包含表达式的id，我怎样才能获得指令之外的元素？

这里是一个例子：http://jsfiddle.net/cd6uooze/

(注意：在我的真实世界应用程序中，这个问题略有不同。我实际上可以getElementById 指令中的正确元素，即使它id 包含一个表达式。但这仅在特定模板位于内部时才有效$templateCache。我无法在 JSFiddle 中对其进行分解，但 JSFiddle 中的示例非常相似。）

【问题讨论】：

您能告诉我们您希望指令的最终结果是什么吗？一旦 ID 和 DOM 操作开始在 angularjs 中使用，我总是认为可能有更好的方法来实现相同的结果。
正如我所说，我想归档类似的东西，比如原生标签和输入，但我不想集中注意力，我想隐藏或显示指令中特定事件的其他元素（比如点击）。通常我会使用在父指令上注册自身的子指令来实现这一点，但这只有在我可以嵌套它们时才有效。（就像 Angulars 文档中的选项卡和窗格示例一样。）

标签： javascript angularjs angularjs-directive

【解决方案1】：

您需要在$timeout 中编写您的getElementById 代码

查看此更新的fiddle。

【讨论】：

所以没有可以使用的事件或回调来指示 ID 何时正确解析？ :/ $timeout 总是看起来像个黑客。
不，没有任何事件或回调，在您的场景中，您必须在绑定完成后执行您的 dom 操作代码。所以我们需要使用$timeout。
好的，我会将您的答案标记为正确。遗憾的是没有更好的方法。