Как заставить HMTL-разметку правильно отображаться в привязке 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 модуль. Или использовать $sce.trustAsHtml(value) в вашем методе, если вы не хотите загружать ngSanitize,

Тогда это будет выглядеть так ($sce деп. вводится в контроллер):

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

Пожалуйста, посмотрите на демо ниже или эту скрипку.

Обновление 12.06.2016:

Я не уверен, есть ли более легкий способ сделать это. Но вы можете проверить каждый столбец и рассчитать требуемый отступ. Для добавления отступа я использовал underscore.string.

Также используйте ng-repeat так что вы можете использовать ng-bind-html и чтобы иметь правильный интервал, вы должны использовать моноширинный шрифт, например, Lucida Console или Courier (см. стиль css в скрипке).

Здесь вы можете найти скрипку для этого.

Еще один способ сделать это - создать директиву в стиле тега select, тогда вы можете использовать таблицу внутри выпадающего списка, чтобы получить правильный интервал.

Обновление 12.06.2016 - 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, ' '));
}