Here's a complex question that needs to be broken down. I'm trying to mimic the behavior of the native <label> for <input>. Since nesting is not an option, I use a style like this:
<input type="checkbox" id="test" />
Some other content...
<label for="test">Lorem ipsum</label>
In my scenario, <label> is a custom directive and <input> is any arbitrary element. It could look like this:
<p id="test">Some element...</p>
Some other content...
<custom-directive for="test">My directive</custom-directive>
Unfortunately, my id is not static. It's an expression, which looks like this:
<p id="test-{{ foo }}">Some element...</p>
Some other content...
<custom-directive for="test-{{ foo }}">My directive</custom-directive>
Now here's my problem: Inside <custom-directive>, I want to access the element specified in the for attribute. If we assume that foo has the value of "bar" set in the $rootScope, inside <custom-directive> it becomes foo-bar. However, no matter where I try (inside compile, link, controller, with or without a priority, etc.), at that point the specific element (in this case <p>) still has test-{{ foo }}, so using getElementById returns null.
How can I access an element outside of the directive if its id contains an expression?
Check out this example: http://jsfiddle.net/cd6uooze/
(Note: In my real-world application, this issue presents itself slightly differently. I am actually able to use getElementById correctly from a directive even when the id contains an expression. However, this only works if the specific template is within the $templateCache. Unfortunately, I couldn't fully replicate this in the JSFiddle, but the example given there is very similar.)