AngularJS contenteditable компиляция содержимого при изменении

Question

У меня есть контент-доступ, подобный этому.

<div contenteditable input-container></div> 

Внешнее событие может добавлять содержимое html в контент, доступный для контента. Это может быть простой html-текст или html с директивой. Так, например, я могу получить

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

Итак, при изменении контента, доступного для контента, мне нужно перекомпилировать. Я делаю это так:

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

Ok получил его, ошибка здесь

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

$compile ожидает элементы DOM, а не HTML текст. Таким образом, замена с последующим фиксированием

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