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

Question

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

<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>

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

功能在控制器中，简单地说：

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

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

Answer 1

这是Angular的安全限制，请参阅此处的文档。

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

然后看起来是这样的($sce被dep.注入控制器)：

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

请看下面的演示或这把小提琴。

更新时间：2016年6月12日：

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

同样使用ng-repeat，这样您就可以使用ng-bind-html，并且为了获得正确的间距，您应该使用单空格字体，例如Lucida Console或Courier(请参阅小提琴中的css样式)。

在这里你可以找到一把小提琴。

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

更新时间：2016年6月12日-21:25(UTC)：

请看一下这把小提琴。它使用的是指导性的方法，我认为这是解决这个问题的最佳方案。

angular.module('demoApp', ['ngSanitize'])
	.controller('mainCtrl', MainCtrl);

function MainCtrl() {
	var vm = this;

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

<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>

Answer 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, ' '));
}