How to show mixed html and css with angularJS


Tags: html,css,angularjs

Problem :

Let's say I have an string that has both CSS and HTML code like this:

<style>.leaf{ color:#0f0; }</style><h1 class="leaf>Tree</h1>

If I use $sce.trustAs($sce.HTML, mystring), it wont render the CSS. Also you cannot concatenate the "trustAs" functions.

So how can you render everything?



Solution :

Use angular.element to create an element that you can then append the string to.

Then pull the style tags out of the element and append them to the head of page

This would be done in a preprocessor in controller or service before sending to view

Then let angular sanitize the string and the style will already be in page for it.

  var str='<style>.leaf{ color:#0f0; }</style><h1 class="leaf">Tree</h1>';
  // create element to append string to
  var $el= angular.element('<div>');
  $el.append(str);
  var $style = $el.find('style').addClass('sanitized-style');
  angular.element($document[0].head).append($style);

Remove in destroy of controller

$scope.$on('$destroy', function(){
   angular.element( $document[0].getElementsByClassName('sanitized-style')).remove();
});

DEMO


    CSS Howto..

    How to make a child div alone responsive using css?

    How do I assign a class to a jquery button var

    how to remove and add classes using same function? [closed]

    How Do I Reduce the Padding Around a Chart Within an Article

    How to arrange two butons side by side in Struts2

    How to apply different css style for IE 10 and 11 only?

    How do I access separate points/sections on a single image in html/javascript?

    How can I size these spans so that the pictures don't extend past them?

    How can I create a line after my text to the width of the container?

    How to confine an animated div to its parent div

    How to use html entities in CSS content property?

    how can i change value of transform with jQuery?

    How do I make this Javascript checkbox trigger action work like my CSS only example

    How to apply css to id generated dynamically?

    How to put text on the center of a circle using CSS

    how to align first li left and second li center in the ul element

    How to tell what is the right css line to apply in nested classes

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?

    How to separate Text and HTML with CSS

    How to write below CSS lines in zend framework 2 syntax?

    How do I center text vertically with css [duplicate]

    How can I center a button in the cell of a table using CSS ASP.NET

    How to resize animated gif with HTML/CSS?

    How to draw mobile device edge using CSS?

    CSS - How to make different background color from css file used [closed]

    How to force an update of a css selector inside context?

    How to make an external HTML file not appear in the home page?

    How to resize div with CSS by the border

    How to hide a class on specific page using css

    How to make CSS compatible with all browsers?