Menu
My database stores product information, and a lot of this is organised into lists. I load the data into Angular as $scope.post.
For instance,
$scope.post.size_description = '<li> Fits true to size. Take your normal size\r</li>
<li> Slim-cut, mid-rise style</li>
<li> Long in length, alter to fit</li>
<li> Model wears an IT 48\r</li>
<li> Model measures: waist size 32, height 6\'1"/ 185cm\r</li>'.
When I try to load this data into my Angular app, it gets rendered as text (i.e. the <li> are not parsed). I understand this probably happens for security reasons, but is there any way around it?
279
To render a html string in angular, we can use the innerHTML property by binding a string to it. The innerHTML property sanitizes the html, so that your app is safe from the cross-site scripting attacks(XSS).
Rendering tags are text strings embedded in the server response file HTML source code. A rendering tag has this general form: {{ tag }} {{ tag (parameter-list) }}
The ng-bind-html directive is a secure way of binding content to an HTML element. When you are letting AngularJS write HTML in your application, you should check the HTML for dangerous code. By including the "angular-sanitize.
As Damax has said here: https://stackoverflow.com/a/11640420/769083
<div ng-bind-html-unsafe="post.size_description"></div>
ngBindHtml worked for me. See more in the docs here: https://docs.angularjs.org/api/ng/directive/ngBindHtml
<div ng-bind-html="post.size_description"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
