Angular: Как получить элемент по id с выражением из директивы?

Question

Громоздкий вопрос вперед, поэтому давайте разберемся с этим. Я пытаюсь добиться аналогичного поведения, как родной <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" установить в $rootScope внутри <custom-directive> я получил foo-bar, Однако где бы я ни пробовал (внутри compile, link, controller с или без priority и т. д.) конкретный элемент (здесь <p>) еще test-{{ foo }} в то время, так что я получаю null с getElementById,

Как я могу получить элемент вне директивы, если он имеет id содержащие выражение?

Вот пример: http://jsfiddle.net/cd6uooze/

(Примечание: в моем приложении реального мира эта проблема немного отличается. getElementById правильный элемент из директивы, даже если это id содержит выражение Однако это работает только до тех пор, пока конкретный шаблон не окажется внутри $templateCache, Я действительно не мог разобрать это в JSFiddle, но пример из JSFiddle очень похож.)

Answer 1

Вам нужно написать свой код getElementById внутри $timeout

Проверьте эту обновленную скрипку.