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（嗯，你可以，但绑定不起作用）

要使其正常工作，您需要绑定AND COMPILE HTML以使角度绑定起作用。

要执行此操作，您可以使用此链接中的自定义指令bind-html-compile https://github.com/incuna/angular-bind-html-compile

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

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

希望它有所帮助。

ngModel指向动态html

2 个答案: