AngularJS contenteditable編譯內容變化

Question

我有一個像這樣contenteditable輸入。

<div contenteditable input-container></div> 

外部事件可能會將html內容添加到contenteditable中。它可以是純HTML文本，或帶有指令的html。因此，例如，我可能會結束與

<div contenteditable input-container> 
    <some-directive></some-directive> 
</div> 

因此，當contenteditable內容改變時，我需要重新編譯。我這樣做，就像這樣：

module.directive('inputContainer', ['$compile', function($compile) { 
    return { 
     restrict: "A", 
     link: function(scope, element) { 
      element.on('change', function(){ 
       console.log("Compile main input content"); 
       $compile(element.html())(scope); 
      }); 
     } 
    }; 
}]); 

假設內部指令是這樣的：

module.directive('someDirective', function() { 
    return { 
     restrict: "E", 
     template: "<span>***test***</span>", 
     replace: true, 
     scope: { 
      item: "=" 
     }, 
     link: function(scope, element) { 
      console.log(element.html()); 
     } 
    }; 
}); 

問題是，一切都似乎向運行正常，沒有錯誤和控制檯日誌在哪裏他們預計，但沒有更新頁面，它沒有顯示預期

***test*** 

我做錯什麼了嗎？

Answer 1

好了它，錯誤的是這裏

$compile(element.html())(scope); 

$compile預計DOM元素，而不是HTML文本。所以用下面的固定替換

$compile(element.contents())(scope);