AngularjsディレクティブのネストされたDOM要素をダイナミックセレクタでクエリする方法はありますか？親テンプレート内の

Question

指令割り当て：

<div badge></div> 

指令テンプレートtemplates/badge.html：
ダイナミックIDの通知割り当て、指令$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> 
" 

ネストした要素をダイナミックセレクタでクエリするには？テンプレートの角レンダリングされた動的値の後にディスパッチされる他のディレクティブメソッドはありますか？

私はそれが正しい方法だとは思わないから、linkメソッド内でレンダリングテンプレートを遅らせるために機能を注入し$timeoutを使用することをお勧めしないでください...

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); 
} 

使用$タイムアウト

あなたはuのでき0秒遅れで$timeoutが表示されても、間違った方法ではありません。 $timeoutは、現在の$digestサイクルの直後にコードを実行します。つまり、ビューのバインディングが更新された後に表示されます。