在Angular JS中使用Style嵌入HTML

时间:2017-03-28 01:58:42

标签: javascript jquery html css angularjs

我从服务中返回一堆受信任的html然后在ng-repeat中我想循环遍历HTML并显示它以便我使用ng-bind-html="item.myHTML"但是如果HTML有{{1}应用于它然后此样式应用于整个页面,如何才能将此样式应用于我<style>中的HTML?

以下是我从服务中获得的一些HTML可能看起来像

ng-bind-html

但是页面上的所有h1标签都有颜色栗色,但我不想这样,只是嵌入html才能拥有那种风格。

谢谢

2 个答案:

答案 0 :(得分:1)

你真的不可能。样式标签是html文档的全局标签。您需要使用标准的css范围规则来定位元素。

如果列表中的每个对象都有唯一属性(例如ID),并且您正在生成内容和css,则可以使用对象ID作为html ID属性来定位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>

即。字符串&#39; object-001&#39;是为数据集中的每个记录动态生成的。

答案 1 :(得分:0)

我建议添加scoped属性:<style scoped></style>

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

取决于所需的浏览器支持。