Javascript 如何保护angularjs指令的css?

Javascript 如何保护angularjs指令的css?,javascript,angularjs,Javascript,Angularjs,我的一个AngularJS指令在其模板中使用CSS。如何保护此CSS不受用户定义的外部CSS类的影响 <selectable-data-list items="myItems"></selectable-data-list> 因此,如果用户添加一个class.someclass{position:relative;},这将使我所需的UI指令变得混乱或混乱 那么,我该如何保护它呢 我知道一种方法,使用一些长的随机字符串作为类名。但是有没有别的办法呢?我认为你不能完全保

我的一个AngularJS指令在其模板中使用CSS。如何保护此CSS不受用户定义的外部CSS类的影响

 <selectable-data-list items="myItems"></selectable-data-list> 
因此,如果用户添加一个class.someclass{position:relative;},这将使我所需的UI指令变得混乱或混乱

那么,我该如何保护它呢


我知道一种方法,使用一些长的随机字符串作为类名。但是有没有别的办法呢?

我认为你不能完全保护它。如果您担心意外覆盖,您可能会使类名更加唯一—甚至可能是生成的某种GUID。或者考虑一个ID,真的你想让你的选择器比任何可能的外部CSS更具体,ID对元素是特定的。 您可以使用css值!重要的是,但是你应该看看-特别是关于使用错误的部分!重要的即使如此,如果消费者创建了一个更具体的选择器,并且具有!重要的旗帜,它会赢的


希望其他人会有一个更明确的答案。

你不能保护你的ccs。我使用多个指令和它们自己的css模板,并且我总是得到冲突的css规则

最好的做法是为指令彻底定义css类。这将最大限度地减少用户和您自己的css规则冲突。因为如果有多个css规则指向同一个对象,则“重要信息”将没有帮助

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