<ion-item ng-bind-html="renderHtml(word[key])">
</ion-item>
Where word[key] is
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
CSS:
ul {padding: 1px 10px 1px 20px;list-style-type: upper-roman;}
I have a much more complex structure with css. The CSS works on cordova and react but since i am porting function to ng, the css do not work. Please Advise or point what i am missing here.
You're seeing the angular XSS security in play (see http://errors.angularjs.org/1.2.23/$sce/unsafe).
There are 2 ways to fix this:
If the html is user created/influenced in some way, you will need to include the $sanitize module. Refer to the link above.
If the html is from you only, mark it as trusted HTML using $sce.trustAsHtml. Something like:
angular.module('myapp', []).controller('myctrl', function($scope, $sce) {
$scope.renderHtml = function(html) {
return html;
};
$scope.word = $sce.trustAsHtml('\
<ul>\
<li>item 1</li>\
<li> item 2 </li>\
<li>item 3</li>\
</ul>');
});ul {padding: 1px 10px 1px 20px;list-style-type: upper-roman;}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myctrl">
<ion-item ng-bind-html="word"></ion-item>
</div>
