関数を使用してAngularJSバインディングでHMTLマークアップを正しく表示する方法は？

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>

第一及び第二の行ではなくコードのスペースを示し、現れます。しかし3行目は& nbspを示しています。スペースの代わりにコードを使用します。

機能は単に、コントローラである：意図したように、この機能を動作させる方法

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

？ （ngRepeaterに添付された選択オプションでテキストを変更する必要があります）

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

以下のデモや、このfiddleを見てください。

アップデート2016年6月12日：

私はこれを行うための簡単な方法があるかどうかはわかりません。しかし、各列をチェックし、必要なパディングを計算することができます。 パディングを追加するために私はunderscore.stringを使用しました。

また、ng-repeatを使用してください。ng-bind-htmlを使用し、正しいスペースを使用すると、モノスペースのフォントを使用する必要があります。 Lucida ConsoleやCourier（フィドルのCSSスタイルを参照）。

ここにfiddleがあります。

これを実行するもう1つの方法は、選択タグのようなスタイルのディレクティブを作成し、ドロップダウン内の表を使用して正しい間隔を持たせることです。

アップデート2016年6月12日 - 21時25（UTC）：

このfiddleを見てください。これはディレクティブアプローチを使用しており、私はこれが問題の最良の解決策だと考えています。

：myReplaceは（AWolfによって答えとして）であることを

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

：仕事を得るための方法を見つけた

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

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