时间戳

首页 > 解决方案 > 如何保护 angularjs 指令的 css？

javascript - 如何保护 angularjs 指令的 css？

问题描述

我的 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>

因此，如果用户添加了一个 class .someclass{position: relative;}，那我的指令所需的 UI 就会混乱或混乱。

那么，我该如何保护它呢？？

我知道一种方法，方法是使用一些长的随机字符串作为类名。但是有没有其他方法可以做到这一点？

标签： javascriptangularjs

解决方案

你不能保护你的抄送。我使用多个指令和他们自己的 css 模板，我总是得到相互冲突的 css 规则。

最好的办法是为您的指令彻底定义您的 css 类。这将最大限度地减少用户和您自己冲突的 css 规则。因为!important如果您有多个指向同一个对象的 css 规则将无济于事。

推荐阅读