在 标记中使用 标记的 HTML 换行符答案

【问题标题】：HTML break line using tag in tag在 标记中使用 标记的 HTML 换行符
【发布时间】：2017-03-18 03:07:54
【问题描述】：

在我的 HTML 中，我使用的是

显示一些文本，如下所示：

 <p> {{item.bio}} </p>

这是生物对象的样本：

 "bio": "A<br>B<br>C<br>D<br>E<br>F"

我原以为我会在单独的行中获取每个字母，但最糟糕的是，当我运行我的 HTML 时，会向我显示使用   标签编写的文本。

【问题讨论】：

您的 minimal reproducible example 缺少 JavaScript（因此它不完整或无法验证）。我们无法分辨是什么用数据替换了该模板占位符。（有几种不同的模板语言使用相似的语法，它们以不同的方式工作）
还是车把？ :) 在这种情况下你可以使用{{{item.bio}}}
@DeepakAgrawal 是的，我正在从事 Ionic 项目
复制：stackoverflow.com/questions/18771822/…
也许这个链接会对你有所帮助：stackoverflow.com/questions/9381926/…

标签： javascript html

【解决方案1】：

评估表达式并将生成的 HTML 以安全的方式插入到元素中。在模块的依赖项中使用ngSanitize。

我们想要您的代码：

<p ng-bind-html="item.bio"></p>

更多详情请阅读here。

【讨论】：

最简单和最好的解决方案 :) 我认为很有用，很快就会接受

【解决方案2】：

要在 ionic V1 中插入 html，您应该使用 ng-bind-html 指令：

 <div ng-bind-html="item.bio"></div>

第二个版本

<div [innerHTML]="item.bio"></div>

【讨论】：

【解决方案3】：

使用sanitize

 angular.module('sanitizeExample', ['ngSanitize'])
           .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
             $scope.snippet =
               '<p style="color:blue">an html\n' +
               '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
               'snippet</p>';
             $scope.deliberatelyTrustDangerousSnippet = function() {
               return $sce.trustAsHtml($scope.snippet);
             };
           }]);

【讨论】：