2014-09-26 6 views
23

Wie dekodiere ich HTML-Entität in Text mit eckigen JS.HTML-Entity in Angular JS decodieren

Ich habe die Zeichenfolge

""12.10 On-Going Submission of ""Made Up"" Samples."" 

Ich brauche einen Weg, um diese mit Angular JS zu dekodieren. Ich habe einen Weg gefunden, das mit Javascript here zu tun, aber ich bin mir sicher, dass das nicht für Angular funktioniert. Sie möchten die ursprüngliche Zeichenfolge auf der Benutzeroberfläche zurück zu bekommen, die wie

""12.10 On-Going Submission of ""Made Up"" Samples."" 

Antwort

41

Sie können die ng-bind-html Direktive verwenden aussehen würde es als HTML-Inhalt angezeigt werden mit allen HTML-Entities dekodiert. Stellen Sie sicher, dass die ngSanitize Abhängigkeit in Ihrer Anwendung enthalten.

DEMO

JAVASCRIPT

angular.module('app', ['ngSanitize']) 

    .controller('Ctrl', function($scope) { 
    $scope.html = '"12.10 On-Going Submission of ""Made Up"" Samples."'; 
    }); 

HTML

<body ng-controller="Ctrl"> 
    <div ng-bind-html="html"></div> 
    </body> 
+14

aber wenn Sie nicht zu machte es als html nicht, wie kann man damit umgehen: Dieses Problem wurde von Code aus Winkel ngSanitize Modul gelöst? –

22

Wenn Sie ngSanitize nicht verwenden möchten, können Sie es auf diese Weise tun:

in Ihrem Controller:

$scope.html = '&quot;12.10 On-Going Submission of &quot;&quot;Made Up&quot;&quot; Samples.&quot;' 
$scope.renderHTML = function(html_code) 
     { 
      var decoded = angular.element('<textarea />').html(html_code).text(); 
      return $sce.trustAsHtml(decoded); 
     }; 

Und in der Vorlage:

<div ng-bind-html="renderHTML(html)"></div> 

So stellen Sie sicher, dass Sie $ sce in Ihrem Controller

+0

Das funktioniert, aber ich bekomme diesen Fehler in der Konsole: 'angular.min.js: 123 TypeError: angular.element (...). Html (...). Text ist keine Funktion bei b. $ scope.renderHTML (app.js: 24) bei fn (eval bei kompilieren (angular.min.js: 239), : 4: 284) bei angular.min.js: 129 bei m. $ digest (angular .min.js: 146) bei m. $ apply (angular.min.js: 149) bei angular.min.js: 21 bei Object.invoke (angular.min.js: 44) bei c (angular .min.js: 21) bei Sc (angular.min.js: 22) bei ue (angular.min.js: 20) ' – Flash

1

Ich habe ähnliches Problem injizieren, muss aber nicht Verwenden Sie den Ergebniswert auf der Benutzeroberfläche.

var hiddenPre=document.createElement("pre"); 
 
/** 
 
* decodes all entities into regular string 
 
* @param value 
 
* @returns {string} A string with decoded entities. 
 
*/ 
 
function decodeEntities(value) { 
 
    if (!value) { return ''; } 
 
    
 
    hiddenPre.innerHTML = value.replace(/</g,"&lt;"); 
 
    // innerText depends on styling as it doesn't display hidden elements. 
 
    // Therefore, it's better to use textContent not to cause unnecessary reflows. 
 
    return hiddenPre.textContent; 
 
} 
 

 

 
var encoded = '&lt;p&gt;name&lt;/p&gt;&lt;p&gt;&lt;span style="font-size:xx-small;"&gt;ajde&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;da&lt;/em&gt;&lt;/p&gt;'; 
 
var decoded = decodeEntities(encoded); 
 

 
document.getElementById("encoded").innerText=encoded; 
 
document.getElementById("decoded").innerText=decoded;
#encoded { 
 
    color: green; 
 
} 
 

 
#decoded { 
 
    color: red; 
 
}
Encoded: <br/> 
 
<div id="encoded"> 
 
</div> 
 

 
<br/> 
 
<br/> 
 

 
Decoded: <br/> 
 
<div id="decoded"> 
 
</div>