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

    With media queries, how to prevent the browser from downloading a smaller background-image if a larger image has already been downloaded?

    How to replace with a
    filled with CSS?

    How to make top and bottom of div triangle with CSS?

    How to link css to html in an express project?

    How to read minified CSS?

    Show nested list on click in Joomla (1.7.0)

    How to create fluid trapezoid image with css?

    Styling the placeholder of an input, how can I do this? [duplicate]

    how can I create overlay div to fit the rest of the screen

    How to create image queue effect using CSS3, jQuery, and HTML? [closed]

    How to hide an input-box with CSS

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    How do I code a BTN in an HTML project to open a users email client

    How to add padding to the left and right side of grid in Bootstrap WITHOUT padding between grid boxes using col-sm-3

    In CSS, how to toggle the tab color if it was selected (without using javascript)

    How to select other (sibling) elements CSS?

    How to specify which element to change background color jquery

    How do I add a margin between bootstrap columns without wrapping

    How to append the Pseudo-class (active) to

    How to set caption for youtube videos box in css?

    how to set height of a 'td' inside a array in javascript using CSS

    How to prioritize a CSS class?

    How to remove dash inside text with CSS?

    how can I access a css class from the appended html div?

    How to add a sub menu in css template for blog? [closed]

    How do I move a list's bullet point to the right side of the text?

    How to make the html table on same line? Wordpress, woocommerce

    How to get position of div inside td

    How to make a 3D banner overlay (??) with CSS

    How style selected option with CSS without styling all the other options?