如何使用函数使 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>

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

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

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

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

Answer 1

这是 Angular、see docs here 的安全限制。

您可以使用 ng-bind-html 并加载 ngSanitize 模块。如果您不想加载 ngSanitize.

，或者在您的方法中使用 $sce.trustAsHtml(value)

然后它看起来像这样（$sce 是 dep. 注入控制器）：

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

请看下面的演示或这个fiddle。

2016 年 6 月 12 日更新：

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

同时使用 ng-repeat 这样您就可以使用 ng-bind-html 并且为了获得正确的间距，您应该使用等宽字体，例如Lucida Console 或 Courier（参见 fiddle 中的 css 样式）。

在这里你可以找到一个fiddle。

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

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

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

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

How to make HTML markup show correctly in AngularJS binding using a function?

angularjs

angularjs-bindings