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 */ 
}