Embed HTML with Style in Angular JS

Question

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

If you are trying to apply styles to specific elements, using a <style> element would be an antipattern-- I'd recommend looking into ng-style. — Alexander Nied
– Alexander Nied, Commented Mar 28, 2017 at 2:01
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
– Alexander Nied, Commented Mar 28, 2017 at 2:14
After seeing the sample, i think the word your looking for is <iframe> :) . Not a good solution but it might work... — fluoresce
– fluoresce, Commented Mar 28, 2017 at 2: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
– iqueqiorio, Commented Mar 28, 2017 at 2:29

fluoresce · Accepted Answer · 2017-03-28 03:19:08Z

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.

edited Mar 28, 2017 at 3:19

answered Mar 28, 2017 at 2:10

fluoresce

4522 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

iqueqiorio Over a year ago

Great idea, but the styles is not formatted enough where I can do that any other thoughts?

fluoresce Over a year ago

not sure exactly what your asking, i edited my example a bit.

iqueqiorio Over a year ago

So im not generating the code inside the style, so I cant preface them all with an #id

fluoresce Over a year ago

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.

iqueqiorio Over a year ago

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

|

Tim Harker · Accepted Answer · 2017-03-28 02:06:33Z

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.

answered Mar 28, 2017 at 2:06

Tim Harker

2,4151 gold badge17 silver badges28 bronze badges

3 Comments

fluoresce Over a year ago

scoped css is only implemented by firefox at this poiunt, and the feature has fallen out of the html specifications.

Alexander Nied Over a year ago

Scoped enjoys almost no support.

Tim Harker Over a year ago

Have a read of this... jQuery scoped CSS plugin. Of course Jquery with AngularJS??? Plugin does fairly well... check out the examples in different browsers.

Collectives™ on Stack Overflow

Embed HTML with Style in Angular JS

2 Answers 2

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related