ngModel, который указывает на динамический HTML

Question

У меня есть установки ретранслятора, который выглядит, как этот

<table class="table table-condensed"> 
    <tr ng-repeat="m in resp.AvailableTemplates"> 
     <td> 
      <input type="checkbox" ng-model="m.Selected" /> 
      <span ng-bind-html="m.MessageText"></span> 
     </td> 
    </tr> 
</table> 

Где m.MessageText это строка, которая выглядит как-то

Hello <input type='text' value=''/>!, thanks for the <input type='text' value=''/> 

пользователь увидит список шаблонные фразы, отменить нужные фразы, заполнить текстовые области и отправить, который отправляет электронное письмо с заполненными фразами.

Используя ng-bind-html, результат выглядит так, как должен. Но при использовании ng-модели на выходе не отображается html. Как я могу привязать эту информацию, чтобы она отображалась как правильный html, но также позволяет мне собирать информацию, предоставленную пользователем?

Answer 1

Попробуйте это:

<span ng-bind-html="{{m.MessageText}}"></span> 

Answer 2

Угадайте вам нужно прилагаемую HTML

Hello <input type='text' value=''/>!, thanks for the <input type='text' value=''/> 

быть переплетены в вашей угловой модели, что-то вроде

Hello <input type='text' value='' ng-model="m.messageContentOne"/>!, thanks for the <input type='text' value='' ng-model="m.messageContentTwo"/> 

НО вы не можете вынести HTML, что содержит угловые привязки с ng-bind-html (ну, вы можете, но привязки не будут работать)

Чтобы заставить его работать, вам необходимо привязать и СОХРАНИТЬ HTML, чтобы угловые привязки работали.

Для этого вы можете использовать пользовательские директивы связывания-HTML-компиляцию, по этой ссылке https://github.com/incuna/angular-bind-html-compile

Вы также можете сделать это самостоятельно, вам просто необходимо создать директиву, которая компилирует элемент директивы с угловым $ compile service

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

Надеюсь, это поможет.