Angularのテンプレート関数を再利用

Question

Angularでは、$compileサービスを注入することができ、その場でコンパイルすることができます。このように：再利用できるように$compileに最初の呼び出しの結果を保存することが可能である場合

let compiledElement = $compile('<my-elem></my-elem>')(myScope); 

それでは、私が知りたいことはあります。このような何か：

let templateFunction = $compile('<my-elem></my-elem>'); 
cacheTemplateFunction(templateFunction); 
let compiledElement = templateFunction(myScope); 

実際に、ここでは私のコードは次のようになります。

const cachedTemplateFunction = {}; 

function compileRawHtml(html, scope){ 
    let compiledEl; 
    if(cachedTemplateFunction[html]){ 
     let tempFunc = cachedTemplateFunction[html]; 
     compiledEl = tempFunc(scope) 
    } else { 
     let tempFunc = $compile(html); 
     cachedTemplateFunction[html] = tempFunc; 
     compiledEl = tempFunc(scope); 
    } 
} 

だから、最初の時間を通してそのテンプレートと、それはテンプレート関数をコンパイルしてキャッシュします。その後、それを2度目に再利用します。私がこれを呼び出すと、未定義のchildNodesに関するエラーが発生します。ですから、$ compile呼び出しから返されるテンプレート関数を再利用することはできないと仮定していますか？

Answer 1

$compileを呼び出すと、publicLinkFnという名前が返されます。この関数は、コンパイル関数への後続の呼び出しをバイパスするために保存および呼び出すことができます。唯一の注意点は、と呼ばれるpublicLinkFnに2番目のパラメータを渡す必要があることです。 Angularの内部はcloneAttachFnに電話し、2つのパラメータを渡します。まず、$compileと呼ばれる要素のクローンコピーが作成されます。 2番目はclonedElementのスコープです。 cloneAttachFnはDOMに要素を添付する必要があります。そうでない場合は、エラーが発生します。

上記のコードに変更する必要がある唯一のものは以下の通りです：

tempFunc(scope, (clonedEl, currentScope)=>{ 
    //You simply need to attach the clonedEl to the DOM 
    angular.element('.some-selector').append(clonedEl); 
})