ngModel - вставить директиву в форматировщике

Question

У меня есть ngModel, который один из атрибута содержит HTML и некоторые специальные заполнители, например:

<p>This is test</p> 
[image id="1123"] 

Перед тем, как вынести значение ngModel мне нужно заменить эти специальные местозаполнители HTML , например:

<div my-directive> 
     <img src="/some_image.jpg"/> 
    </div> 

Так что я хотел бы иметь директиву здесь. Я думал, что для этого я могу использовать форматтер. Поэтому я добавил в ngModel. $ Formatters новую функцию, которая заменяет строку, которая соответствует placeholder с директивой. Моя форматировщик выглядит следующим образом:

function(value){ 
    var replacedValue = value.replace(regexp, function(match, placeholder){ 
     var div = document.createElement("div"); 
     div.appendChild($compile("<div my-directive></div>")(scope)); 
     return div.innerHTML; 
    }) 

    return replacedValue; 
} 

Проблема заключается в том, что, когда мой директивы заявил templateURL, шаблон не отображается. Отображается только «». При использовании шаблона в директиве, я получаю весь HTML для директивы оказанной, но интерполированные значения не заменены, так, например, я получаю:

<img ng-src="{{ image.url }}"/> 

Другая проблема заключается в том, что, когда директива есть некоторые слушатели событий переплетены к элементу они не были уволены, что я понимаю, так как когда форматировщик называется, этот HTML не находится в DOM.

Итак, вопрос в том, как правильно реализовать такую ​​функцию? При замене заполнителей в директивы?

Answer 1

Я понял, что было не так с этим подходом. Я слишком рано пытался скомпилировать директивы. Чтобы заставить его работать, замену заполнителя можно сделать в форматировании. Однако компиляция должна выполняться в вызове $ render. В моем случае функция $ render выглядит так:

ngModel.$render = function() { 
    element.html(ngModel.$isEmpty(ngModel.$viewValue) ? "" : ngModel.$viewValue); 

    if(element.html()) { 
    $compile(element.contents())(scope); 
    } 
};