Найти элемент, не найденный в AngularJS

Question

У меня есть компонент в AngularJS и шаблон, который выглядит примерно так:

Шаблон

<div id="{{ $ctrl.idName }}"></div>

И контроллер компонента выглядит примерно так

Контроллер компонентов

export class SomeCtrl {

    idName: string = "idName";

    constructor(public $element) {

    }

    $postLink(): void {
        const divElement = this.$element.find(`#${ this.idName }`);
        console.log(divElement); //divElement is undefined
    }
}

По какой-то причине divElement становится неопределенным, однако, если я напишу имя в шаблоне следующим образом

<div id="idName"></div>

Тогдаэлемент найден. Мое предположение, что это было связано с шаблоном еще не закончил компиляцию. Но, похоже, не из-за этого, поскольку метод $postLink() запускается по окончании компиляции в соответствии со следующей статьей ThoughtRam - Исследование Angular 1.5: крюки жизненного цикла

Answer 1

Заключите find в $timeout:

export class SomeCtrl {

    idName: string = "idName";

    constructor(public $element, public $timeout) {

    }

    $postLink(): void {
        this.$timeout( _ => {
            const divElement = this.$element.find(`#${ this.idName }`);
            console.log(divElement); 
        });
    }
}

Это позволит платформе AngularJS и времени браузера отразить интерполяцию.