How can I display as space not as string. Is there raw filter like in twig?
<div>{{item}}</div> $scope.item = ' '; But the result is escaped &nbsp;. I need this because ' ' have height of 0.
- Check this out: stackoverflow.com/questions/9381926/…nramirez– nramirez2014-07-09 15:19:15 +00:00Commented Jul 9, 2014 at 15:19
- @NidhishKrishnan it was original answer I've mark and it first one that was correct. Still not sure which one should I mark as the answer.jcubic– jcubic2014-07-10 12:37:26 +00:00Commented Jul 10, 2014 at 12:37
- @jcubic i have given much more detailed regarding old and new angular versions with that rightNidhish Krishnan– Nidhish Krishnan2014-07-10 12:41:56 +00:00Commented Jul 10, 2014 at 12:41
Add a comment |
5 Answers
It can be easily done by using ngBindHtml
For Angular above 1.2.x version:
use ng-bind-html
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:
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?'; }); 5 Comments
domokun
almost there:
$scope.item = $sce.trustAsHtml('What Is Your Name?');
jcubic
@domokun You should not edit someone else question with better answer (you can only fix typos, formatting, grammars etc. but not change the answer). If you have better one just create an anwser.
domokun
@jcubic Ok, sorry. The fact is that now the answer that OP selected as correct, is plain wrong...
jcubic
@domokun Both answers work for me in 1.2. If you have answer that work for 1.3, you can add new answer.
domokun
@jcubic done, even though it feels weird to have the answer split like this.
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>'); }); Comments
Try using ngBindHtml
<div data-ng-bind-html="item"></div> 
Comments
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+
You can use the ascii code for   in a string. Alt-255.
This will correctly render as an  .
1 Comment
jcubic
This was not the question how to insert non breaking space character in AngularJS but how to add html entities like
<, > or it's obvious that you can insert any character into text.