0

I am returning a bunch of trusted html from a service and then in a ng-repeat I want to loop through the HTML and display it so I am using ng-bind-html="item.myHTML" but if the HTML has <style> applied on it then this style is applied to the whole page, how can I have this style only be applied to the HTML that is in my ng-bind-html?

Here is what some of the HTML I get form my service might look like

<html>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
<p>test text</p>
<html>

But then all h1 tags on the page have color maroon, but I dont want that, just the embed html to have that style.

Thank you

iqueqiorio
  • 1,149
  • 2
  • 35
  • 78
  • If you are trying to apply styles to specific elements, using a ` – Alexander Nied Mar 28 '17 at 02:01
  • @anied The HTML comes with the style tag see example – iqueqiorio Mar 28 '17 at 02:06
  • Ugh.... that's not great-- is there any way you can have that style element be omitted from the returned HTML? Seems like a real nightmare to deal with... – Alexander Nied Mar 28 '17 at 02:14
  • After seeing the sample, i think the word your looking for is – fluoresce Mar 28 '17 at 02:18
  • @fluoresce yes I was thinking iframe also but I have html as a string how do I set that as the src of the iframe? – iqueqiorio Mar 28 '17 at 02:29
  • http://stackoverflow.com/a/6102829/1478876 ... but you should really try to do something like my answer bellow if you have any control over what the service provides... ng-repeating iframes is asking for a world of problems. – fluoresce Mar 28 '17 at 02:33

2 Answers2

1

You can't really. style tags are global to the html document. You will need to target your elements using standard css scoping rules.

If you have a unique attribute on each object in the list, such as an ID, and you are generating the content and the css, you could use the object ID as a html ID attribute for targeting your css.

<div id="object-001">
  <h1>Managing Director</h1>
  <span class="customer_name">Customer Name</span>
  <span class="customer_id">ID : 001</span>
  <p>This is the bio of the user<p>
</div>
<style>
#object-001 .customer_name { color : #f00; }
#object-001 .customer_id { color : #f00; }
#object-001 p {  color :purple; text-decoration: blink;  }  
#object-001 h1 { margin-left:40px; font-size:48px; }
div#object-001 { background-color : pink; font-face : "Comic Sans MS", cursive, sans-serif; }
</style>

ie. the string 'object-001' is dynamically generated for each record in your dataset.

fluoresce
  • 452
  • 2
  • 8
  • Great idea, but the styles is not formatted enough where I can do that any other thoughts? – iqueqiorio Mar 28 '17 at 03:04
  • not sure exactly what your asking, i edited my example a bit. – fluoresce Mar 28 '17 at 03:19
  • So im not generating the code inside the style, so I cant preface them all with an #id – iqueqiorio Mar 28 '17 at 03:21
  • In that case, i can see two solutions. 1. iframes as above - this might work but note that having a lot of iframes on one page is bad for performance and rendering etc, has many problems and code will be copmplex. 2. Parse the content of the html snippets from the service, possibly using a documentFragment and jQuery and manipulate it into something like my example. or 3. Talk to the people providing the service and suggest that they provide a more sane styling mechanism. – fluoresce Mar 28 '17 at 03:26
  • Valid, I wish I could talk to the people providing the service but this html is coming from email that are being parsed so I cant really control that lol, #2 might be an option – iqueqiorio Mar 28 '17 at 03:29
  • Use number 2 to remove the Style element altogether if possible, KISS paradigm... it could get messy quick, otherwise. If that's not possible and depending on how complicated the styling is, you might have no choice but iframe... which is very powerful - but it does come with its headaches - open it in a window perhaps?!?!? – Tim Harker Mar 28 '17 at 12:59
0

I would recommend adding a scoped attribute: <style scoped></style>

https://www.w3schools.com/tags/att_style_scoped.asp.

Depending on browser support needed.

Tim Harker
  • 2,367
  • 1
  • 15
  • 28
  • scoped css is only implemented by firefox at this poiunt, and the feature has fallen out of the html specifications. – fluoresce Mar 28 '17 at 02:12
  • Scoped enjoys [almost no support](http://caniuse.com/#feat=style-scoped). – Alexander Nied Mar 28 '17 at 02:13
  • Have a read of this... [jQuery scoped CSS plugin](https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin). Of course Jquery with AngularJS??? Plugin does fairly well... check out the examples in different browsers. – Tim Harker Mar 28 '17 at 02:20