如何通過動態選擇器查詢Angularjs指令嵌套的DOM元素？

Question

父模板中指令分配：使用指令$id動態ID的
注意分配：

<div badge></div> 

指令模板templates/badge.html。

<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> 
" 

通過動態選擇器查詢嵌套元素？在Angular呈現模板的動態值之後是否還有其他指令方法？

請不要建議使用$timeout注入功能，延緩裏面link方法模板渲染，因爲我不認爲這是正確的方式...

Answer 1

這裏距角documentation報價：

鏈接後，視圖不會更新，直到調用$ digest，這通常是由Angular自動完成的。

這就是爲什麼你無法在其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`); 
    }); 
}