我的 AngularJS 指令之一在其模板中使用了 CSS。如何保护此 CSS 免受用户定义的外部 CSS 类的影响?
<selectable-data-list items="myItems"></selectable-data-list>
模板由一个 div
字段组成:
<style>
.selectable-data-list{
position: relative;
}
.selectable-data-list .someclass{
position: absolute;
top: 0;
right: 0;
}
</style>
<div class="selectable-data-list">
<!--some additional elements -->
<div class="someclass">something</div>
</div>
因此,如果用户添加一个类 .someclass{position:relative;}
,这将使我的指令所需的 UI 变得困惑或困惑。
那么,我该如何保护它呢?
我知道一种方法,可以使用一些长的随机字符串作为类名。但是有其他方法可以做到这一点吗?
最佳答案
您无法保护您的抄送。我使用多个指令和它们自己的 css 模板,并且我总是遇到冲突的 css 规则。
最好的办法是为您的指令彻底定义 css 类。这将最大限度地减少用户和您自己的 CSS 规则冲突。因为如果你有多个 css 规则指向同一个对象,!important 将无济于事。
关于javascript - 如何保护 angularjs 指令的 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52706536/