Как запросить директиву Angularjs вложенный элемент DOM динамическим селектором?

Question

Директивы распределение внутри родительского шаблона:

<div badge></div> 

шаблона Директивы templates/badge.html:
распределение Уведомления о динамическом идентификаторе, используя директиву $id.

<div> 
    <span id="id{{ ::$id }}_name">Nik Sumeiko, Frontend engineer</span> 
</div> 

Директива:

angular.module('app').directive('badge',() => ({ 
    restrict: "A", 
    replace: true, 
    templateUrl: "templates/badge.html", 
    link: (scope, element, attributes) => { 

    // Tries to query nested DOM element by a dynamic selector. 
    const name = element.find(`#id${scope.$id}_name`); 

    console.log(name.length, element.html()); 
    } 
})); 

Основываясь на выходе консоли это ясно видно, что директива шаблон не компилируется его динамические значения еще:

0 " 
    <div> 
     <span id="id{{ ::$id }}_name">Nik Sumeiko, Frontend engineer</span> 
    </div> 
" 

Как тогда можно для запроса вложенных элементов динамическим селектором? Есть ли какие-либо другие директивные методы, которые отправляются после угловых визуализированных динамических значений шаблона?

Пожалуйста, не предлагают использовать $timeout впрыскивается функцию для задержки рендеринга шаблона внутри link метода, так как я не думаю, что это правильный путь ...

Answer 1

Вот цитата из углового documentation:

После того, как ссылка на просмотр не обновляется до тех пор, пока не будет вызван вызов $ digest, который обычно выполняется угловым автоматически.

Вот почему вы не можете найти элементы, содержащие выражения в своем id - представление в это время не обновляется.

Здесь обходные пути:

Создать элемент и прикрепить его к DOM вручную

Таким образом, у вас есть ссылка на элемент, так что вы не должны запрашивать для него:

link: (scope, element, attributes) => { 
    let span = $compile('<span id="id{{ ::$id }}_name">Nik Sumeiko, Frontend engineer</span>')(scope); 
    // do something to span ... 
    element.append(span); 
} 

Использование $ таймаут

Вы можете у se $timeout с нулевой задержкой, это не так. $timeout выполнит ваш код сразу после текущего цикла $digest, то есть после привязки привязки вида:

link: (scope, element, attributes) => { 
    $timeout(function() { 
     let span = element[0].querySelector(`#id${scope.$id}_name`); 
    }); 
}