How to display   or any raw html in angular data?

angularjs, javascript

Solution

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&nbsp;Is&nbsp;Your&nbsp;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&nbsp;Is&nbsp;Your&nbsp;Name?';
});

Problem

How can I display `&nbsp;` as space not as string. Is there `raw` filter like in twig? ``` <div>{{item}}</div> $scope.item = '&nbsp;'; ``` But the result is escaped `&amp;nbsp;`. I need this because `' '` have height of 0.

Original source

Related problems