自定義AngularJS指令，使用$ compile更新數據

Question

我正在嘗試編寫一個測試指令，它只是在網頁上顯示一些標記。出於某種原因，當我嘗試使用AngularJS的angular.element()函數更新標記時，它僅顯示對象的可視表示。很像從瀏覽器中查看JavaScript對象。

[[object HTMLInputElement], [object HTMLSpanElement], [object HTMLBRElement]] 

這是我的模板頁，我只是吐出指令，它太簡單了。

<div my-sample></div> 

我的指令看起來像這樣，

eventsApp.directive('mySample', function ($compile) { 
    var markup = '<input type="text" ng-model="sampleData" /> {{ sampleData }} <br />'; 
    return { 
     link: function (scope, element, atts, controller) { 
      angular.element(element).html($compile(markup)(scope)); 
     } 
    } 
}); 

我在做什麼錯？

Answer 1

$compile返回DOM元素，而不是HTML。試試element.empty().append($compile(markup)(scope))而不是使用.html()函數。