angularjs - 指向动态 html 的 ngModel

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-model 时，输出不显示 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"/>

但是您不能使用 ng-bind-html 呈现包含角度绑定的 HTML（好吧，您可以，但绑定不起作用）

要使其工作，您需要绑定并编译 HTML 以使角度绑定工作。

为此，您可以使用自定义指令 bind-html-compile，来自此链接 https://github.com/incuna/angular-bind-html-compile

你也可以自己做，你只需要创建一个指令，用 angular $compile 服务编译指令元素

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

希望能帮助到你。