How to display or any raw html in angular data?

Question

How can I display   as space not as string. Is there raw filter like in twig?

{{item}}

$scope.item         


        

Answer 1

You can also create a filter for that.

Filter

app.filter("trustHtmlContent", ['$sce', $sce => htmlCode => $sce.trustAsHtml(htmlCode)]);

usage

<ANY ng-bind-html="value | trustHtmlContent"></ANY>

src: How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

Answer 2

Try using ngBindHtml

<div data-ng-bind-html="item"></div>

Answer 3

You can use the ascii code for &nbsp in a string. Alt-255.

This will correctly render as an &nbsp.

Answer 4

For Angular 1.3.x version:

Use the $sce service to mark the string as safe to use in a specific context (HTML in this case).
See the documentation here

HTML code:

<div ng-app='myApp' ng-controller="Controller">
   <div ng-bind-html="item"></div>
</div>

JS code (controller):

var app = angular.module('myApp', []);
app.controller('Controller', function ($scope, $sce) {
   $scope.item = $sce.trustAsHtml('<span>Some HTML code</span>');
});

Answer 5

It can be easily done by using ngBindHtml

For Angular above 1.2.x version:

use ng-bind-html

Working Demo

html

<div ng-app='myApp' ng-controller="Controller">
   <div ng-bind-html="item"></div>
</div>

script

var app = angular.module('myApp', ['ngSanitize']);
app.controller('Controller', function ($scope, $sce) {
   $scope.item = 'What Is Your Name?';
});

---

For Angular 1.0.x version:

Working Demo

use ng-bind-html-unsafe

html

<div ng-app='myApp' ng-controller="Controller">
   <div ng-bind-html-unsafe="item"></div>
</div>

script

var app = angular.module('myApp', []);
app.controller('Controller', function ($scope) {
   $scope.item = 'What Is Your Name?';
});