The integration of HTML and CSS using ng-bind-html appears to be malfunctioning

Question

The integration of HTML and CSS using ng-bind-html appears to be malfunctioning

<ion-item ng-bind-html="renderHtml(word[key])">

</ion-item>

When referring to word[key], it represents:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

This is the CSS being used:

ul {padding: 1px 10px 1px 20px;list-style-type: upper-roman;}

I am encountering issues with a more intricate structure involving CSS. The styling functions correctly on cordova and react, but when transitioning to Angular (ng), the CSS does not apply as expected. Any advice or insights on what might be causing this discrepancy?

javascript html css angularjs

Answer 1

Answer №1

The angular XSS security feature is currently active, as you can see (refer to http://errors.angularjs.org/1.2.23/$sce/unsafe).

There are two methods to solve this issue:

If the HTML content is influenced by or created by the user in any way, it is necessary to include the $sanitize module. For more details, check the provided link.
If the HTML content is exclusively from your end, you can mark it as trusted HTML by using $sce.trustAsHtml. Here is an example:

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>

Answer 2

The angular XSS security feature is currently active, as you can see (refer to http://errors.angularjs.org/1.2.23/$sce/unsafe).

There are two methods to solve this issue:

If the HTML content is influenced by or created by the user in any way, it is necessary to include the $sanitize module. For more details, check the provided link.
If the HTML content is exclusively from your end, you can mark it as trusted HTML by using $sce.trustAsHtml. Here is an example:

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>

The integration of HTML and CSS using ng-bind-html appears to be malfunctioning

Answer №1

Similar questions

Troubles arise when hovering over the <strong> tag and the <h4> element

What is the behavior of a variable when it is assigned an object?

Keep the music playing by turning the page and using Amplitude.js to continue the song

Retrieve the duplicated items from an array by comparing two specific properties in JavaScript

I have received a JSON multi-line string after entering information in a textarea

jQuery sidebar with a fixed position

How can I utilize the parseFloat feature within my dedicated parseFloat function located in an angular factory?

Determine the TR id when a button within a TD element is clicked using JavaScript/jQuery

When working with angular.js and angular-sanitize.js, the src attribute is removed from JSON HTML data

In JQuery, an empty string will be returned if it contains the dollar sign character

Incorporating AJAX functionality into an existing PHP form

A function cannot be used with Random Song Loop

What is the best way to ensure consistent Box Overlay Height across multiple boxes?

Displaying random divs and subsequently animating them downwards using JavaScript

Achieve automated zooming out using highcharts-ng through code

Guide on changing the background color of a specific row with pagination

Handling the ng-if condition based on a model that dynamically gets updated through an asynchronous

CSS or Coding? Learn how to display items side by side instead of on top of each other

How to Determine If a String Represents an HTML Tag Using jQuery

Storing form data into a database using AngularJS: A comprehensive guide