Angularjs - 单个指令宽度

Question

在我的网站我使用这个指令MULTISELECT几个地方

http://isteven.github.io/angular-multi-select/#/main

例如我用它在我的导航栏的语言选择下拉菜单。不过，我想指定语言下拉菜单的宽度低于标准。其他地方我使用相同的指令和自动宽度是好的。我可以通过更改css文件中的最小宽度和最大宽度来更改语言菜单的宽度，但这会改变我所有多重选择的宽度。

所以基本上，我怎样才能改变指令的一个特定实例的CSS？

[更新]

的多选加入这样的：

<div isteven-multi-select 
     input-model="languages" 
     output-model="outputlanguages" 
     button-label="icon name" 
     item-label="icon name maker" 
     tick-property="ticked" 
     selection-mode="single" 
     helper-elements="filter" 
     on-item-click="changeLanguage(data)" 
      > 
</div> 

当HTML加载isteven-多选DIV将包含以下：

<span class="multiSelect inlineBlock"> 
    <button ...> 
    </button> 
    <div class="checkboxLayer"> //here is the dropmenu itself 
    </div> 
</span 

所以通过在css文件中编辑.checkboxLayer，我可以调整下拉菜单的宽度。但是对于所有多选实例，这都会改变。如果我将另一个类添加到isteven-multi-select中，它不起作用，因为这是父级div。

Answer 1

添加CSS类到div使用您要的小下拉菜单指令：

<div isteven-multi-select 
    input-model="languages" 
    output-model="outputlanguages" 
    button-label="icon name" 
    item-label="icon name maker" 
    tick-property="ticked" 
    selection-mode="single" 
    helper-elements="filter" 
    on-item-click="changeLanguage(data)" 

    <!-- Add this --> 
    class="thinDropdown" > 
</div> 

然后在你的CSS，这样写：

.thinDropdown .checkboxLayer { 
    width: 200px;    /* Or whatever width you like */ 
}