<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 plex 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.

<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 plex 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.

• javascript
• html
• css
• angularjs

• 1 can you create a plnkr? plnkr.co/edit/?p=catalogue – dowomenfart Commented Mar 9, 2015 at 17:52

1 Answer 1

You're seeing the angular XSS security in play (see http://errors.angularjs/1.2.23/$sce/unsafe).

There are 2 ways to fix this:

1. If the html is user created/influenced in some way, you will need to include the $sanitize module. Refer to the link above.

2. 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./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>