リンク機能で追加されたHTMLはスコープにバインドされません

Question

スコープ上のオブジェクトに応じて変更されるテンプレートが必要です。それはオブジェクトで文字列ではないので、テンプレート関数を使うことができないので、リンク関数を使ってhtmlを要素に追加しています。もちろん、私のhtmlは明示的に$補間される必要がありますので、ここで私はどうしたら結構です：

scope: { 
    obj: "=ngModel", 
    type: "<" 
}, 
controllerAs: "display", 
controller: function() { 
    let display = this; 
    // sets bunch of other functions, including booleanLabel and displayData 
}, 
link: function(scope, element, attrs) { 
    let display = scope; 

    function template(type) { 
     switch (type) { 
      case ObjTypes.X: 
       return `<button ng-click="display.toggleBoolean(display.obj)"> 
          {{display.booleanLabel(display.obj.data)}} 
         </button>`; 
      case ObjTypes.Y: 
       return `<button> 
          {{display.displayData(display.obj.data)}} 
         </button>`; 
      } 
     } 

     element.html($interpolate(template(display.type))(display)); 
    } 

これは動作しません。しかしここには奇妙なことがあります：display.objをちょうどobjに置き換えると、その値が得られます。しかし関数はdisplay.function()で呼び出す必要があります。

objが外部からスコープに置かれているのに対し、関数はコントローラによってスコープに置かれているとは限りませんが、信じられないほど奇妙で混乱します。さらに悪いことに、ng-clickは起動しません。私がdisplay.toggle()を使うのか、それともtoggle()だけ使うのかは関係ありません。しかし、display.bojではなくobjを渡す限り、display.booleanLabel（）とdisplay.displayData（）は正常に動作します。

ここでは何が起こっていますか？そして、これを理解して維持するのをより簡単にするにはどうしたらいいですか？

私はAngular 1.5を使用していますが、controllerAs： 'display'を使用し、display = scopeを使用してスコープがどこでも同じ名前を使用するようにします。要点は分かりやすくすることですが、明らかにここでは機能しません。

Answer 1

まず、テンプレートにng-ifを使用できます。

第2に、テンプレートは関数です。

第3に、新しいhtml要素を追加すると、通常$コンパイルする必要があります。あなたは何を補間するのかわかりません...