如何使用函数在 AngularJS 绑定中正确显示 HTML 标记？答案

【问题标题】：How to make HTML markup show correctly in AngularJS binding using a function?如何使用函数在 AngularJS 绑定中正确显示 HTML 标记？
【发布时间】：2016-06-11 21:40:41
【问题描述】：

我有以下代码来说明我遇到的问题：

<p>{{'This&nbsp;&nbsp;&nbsp;&nbsp;is&nbsp;&nbsp;spaced'}}</p>
<p>This&nbsp;&nbsp;&nbsp;&nbsp;is&nbsp;&nbsp;spaced</p>
<p>{{leerlingController.myReplace('This    is  spaced')}}</p>

第一行和第二行按预期显示，显示空格而不是代码。然而，第三行显示了代码而不是空格。

函数在控制器中，简单地说：

vm.myReplace = function(item) {
    return item.replace(/ /g, '&nbsp;');
}

如何使此功能按预期工作？（我需要它来修改附加到 ngRepeater 的选择选项中的文本。）

【问题讨论】：

不明白你到底在问什么 - 你不能加white-space:pre;吗？
这可以通过使用sce（严格上下文转义）库（docs.angularjs.org/api/ng/service/$sce#!）来纠正，但更紧迫的问题是为什么您首先将 HTML 存储在角度变量中地点。

标签： angularjs angularjs-bindings

【解决方案1】：

这是来自 Angular 的安全限制，see docs here。

您可以使用ng-bind-html 并加载ngSanitize 模块。或者，如果您不想加载 ngSanitize，请在您的方法中使用 $sce.trustAsHtml(value)。

然后它看起来像这样（$sce 已被注入到控制器中）：

vm.myReplace = function(item) {
    return $sce.trustAsHtml(item.replace(/ /g, '&nbsp;'));
};

请看下面的演示或fiddle。

12.06.2016 更新：

我不确定是否有更简单的方法可以做到这一点。但是您可以检查每一列并计算所需的填充。添加填充我使用underscore.string。

还可以使用ng-repeat，这样您就可以使用ng-bind-html，并且要获得正确的间距，您应该使用等宽字体，例如Lucida Console 或 Courier（请参阅小提琴中的 css 样式）。

您可以在这里找到fiddle。

另一种方法是创建一个样式类似于选择标记的指令，然后您可以使用下拉列表中的表格来获得正确的间距。

更新 12.06.2016 - 21:25（UTC）：

请看一下这个fiddle。它使用的是指令方法，我认为这是解决问题的最佳方法。

angular.module('demoApp', ['ngSanitize'])
	.controller('mainCtrl', MainCtrl);
    
function MainCtrl() {
	var vm = this;
    
    vm.myReplace = function(item) {
    	return item.replace(/ /g, '&nbsp;');
	};
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.6/angular-sanitize.js"></script>
<div ng-app="demoApp" ng-controller="mainCtrl as ctrl">
    <span ng-bind-html="ctrl.myReplace('This    is  spaced')"></span>
</div>

【讨论】：

我认为来自 cmets 的 Alon Eitan 的建议应该可以按预期工作。我已将它添加到小提琴中，我会使用它。
@Alon Eitan 你是对的，但是这在 select 内的选项元素中不起作用，这就是我需要它的地方。
谢谢。我已经解决了 $sce 部分，但没有使用 ng-bind-html ，显然这很关键。现在我想在 ng 绑定的选择选项中应用它。我已经想出了

【解决方案2】：

找到了完成工作的方法：

<select name='Leerling' id='Leerling' size='1'>
    <option value='Maak een keuze...' selected disabled>Maak een keuze...</option>
    <option ng-repeat="leerlingOption in leerlingController.leerlingen"
            ng-bind-html="leerlingController.myReplace(leerlingOption.leerlingdropdown)"
            value={{leerlingOption.leerlingdropdown}}></option>
</select>

myReplace 是（由 AWolf 回答）：

vm.myReplace = function(item) {
    return $sce.trustAsHtml(item.replace(/ /g, '&nbsp;'));
}

【讨论】：