Angular UI'de akordeon başlığı sınıf/stil nasıl ayarlanır

Question

Akordiyonlarda litotel veritabanı girişlerini oluşturmak için Angular UI kullanıyorum. İlk denemede bootstrap kullandım ama AngularJS görüşlerini bütünleştirdiğim için akordeon artık tam olarak çalışmıyor (boş href ...). Sonra bootstrap akordeonumu açısal UI bootstrap bir ve varsayılan şablon ile değiştirdim.

Sorunum, bootstrap sürümünde, akordeon başlığına bağlı olarak başlığı stilize etmeyi başardım (ng-repeat yönergesini ve başlığın içindeki ng stilini kullanıyordum). Angular UI ile aynı şeyi yapmaya çalıştım, ancak özel sınıfım bile oluşturulmadı.

Bu örnek kod ui.boostrap akordeon ile artık bootstrap ile harika çalışıyor, fakat:

Buradaki amaç bir öğe alanına dayalı farklı bir stil (arka plan rengi ve metin rengi) uygulamaktır

accordion-group.accordion-groupLog(ng-repeat="item in data.entries | filter:search") 
    accordion-heading.accordion-headingLog(ng-style="{backgroundColor: styles[item.importance-1].bkcolor, color: styles[item.importance-1].color}") 
     {{item.title}} ({{item.importance}}) 

. Ayrıca, sınıf akordeon-headingLog akordeon varsayılan boyutunu yeniden boyutlandırmaktır.

İşte hale kodudur:

<div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading"> 
...... 

Ve böyle bir şey bekliyordum:

<div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search"> 
    <div ng-style="{backgroundColor: styles[item.importance-1].bkcolor}" class="accordion-heading accordion-headingLog" style="background-color: rgb(214, 24, 40);"> 

[DEĞİŞTİR] ng sınıf özniteliği ile akordiyon-headingLog sınıfını koymak için çalıştı , ama işe yaramıyor. Sadece test etmek için, sınıf ve stili akordeonun bedenine uyguladım ve işe yarıyor. Akordeon Direksiyon direktifinin herhangi bir sınıf ya da özniteyi kabul etmediğini düşünüyorum. Bir stilin üzerine bir stil dinamik olarak nasıl uygulanır ???

[EDIT] Başka bir deneme kendi şablonumu oluşturmaktı. Akordeon-headingLog sınıfını başlığa uygulayabiliyorum, ancak nasıl özelleştirilebilir bir stil oluşturabilirim? Ng stili kullanmayı denedim ve sabit bir stil uyguladım ama işe yaramıyor.

script(type="text/ng-template", id="template/accordion/accordion-group.html"). 
    div.accordion-group 
    div.accordion-heading.accordion-headingLog(ng-style="{background-color: #123456") 
     a.accordion-toggle(ng-click="isOpen = !isOpen", accordion-transclude="heading") {{heading}} 
    div.accordion-body(collapse="!isOpen") 
     div.accordion-inner(ng-transclude) 

Answer 1

Köşeli UI'nin akordeonunda HTML eklemenize izin veren bir akordeon Yönlendirme yönergesi vardır.kaynak kodunda örnek: İşte

<accordion-group> 
<accordion-heading ng-class="{'custom-style': item.title }"> Your Title </accordion-heading> 
</accordion-group> 

Eğik UI Akordeon kaynak kodu https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

Answer 2

geçerli:

// Use accordion-heading below an accordion-group to provide a heading containing HTML 
// <accordion-group> 
// <accordion-heading>Heading containing HTML - <img src="..."></accordion-heading> 
// </accordion-group> 

Böylece belki şartlı özel css uygulamak için böyle bir şey yapabilir Aynı problem vardı, benim için hızlı çözüm CSS'yi değiştirdi ve ana "akordeon grubu" içine bir sınıf ekledi:

Şablon:

<accordion close-others="true"> 
    <accordion-group ng-repeat="elem in group.elements" is-open="isopen" ng-class="{'collapsed': !isopen}"> 
     <accordion-heading ng-click="isopen=!isopen"> 
      {{ elem.name }} 
     </accordion-heading> 
     This content is straight in the template. 
    </accordion-group> 
</accordion> 

HTML:

<accordion close-others="true"> 
    <div class="panel-group" ng-transclude=""> 
     <!-- ngRepeat: elem in group.elements --> 
     <div class="panel panel-default ng-isolate-scope collapsed" ng-repeat="elem in group.elements" is-open="isopen" ng-class="{'collapsed': !isopen}"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
       <a href="" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"> 
        <span class="ng-binding ng-scope"> 2001 </span></a> 
       </h4> 
      </div> 
      <div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;"> 
       <div class="panel-body" ng-transclude=""> 
        <accordion-heading ng-click="isopen=!isopen" class="ng-scope"></accordion-heading> 
        <span class="ng-scope"> 
         This content is straight in the template. 
        </span> 
       </div> 
      </div> 
     </div> 
    </div> 
</accordion> 

CSS:

accordion>.panel-group .panel.collapsed .panel-heading .accordion-toggle { 
    color: #478fca; 
    font-weight: 400; 
    background-color: #F9F9F9; 
} 

Bir çocuğun sınıfını değiştirmek için bir direktifini oluşturabilir İyi ama bunun en iyi çözüm olduğuna inanmıyorum.