ui.bootstrap - ng-style dans le header d'un accordion
Bonjour !
Je suis un peu novice en la matière, mais j'ai un souci avec angularui bootstrap, et plus particulièrement avec la directive accordion-heading d'un accordion.
Cette directive peut être passée en attribut ou comme élément. Je souhaite l'utiliser comme élément, mais je souhaite également personnaliser un peu son apparence. Pour ce faire, j'utilise le bout de code suivant :
Code:
1
2
3
| 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}}) |
Seulement voilà, ce code est rendu ainsi en html :
Code:
1
2
3
4
| <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">
...... |
Alors que j'attendais plutôt quelque chose comme :
Code:
1
2
| <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);"> |
Apparemment, il ne m'est pas possible de passer une classe de style ni un style dynamique pour cette directive ?
J'ai également fait un autre test en changeant le template par défaut :
Code:
1
2
3
4
5
6
| 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) |
Cette fois, la classe accordion-headingLog est bien appliquée (mais ne se retrouve pas dans le code html !), par contre le style dynamique n'est toujours pas rendu.
Faut-il que je pense à trouver/modifier la directive directement dans angularui, ou bien est-ce un souci avec mon template ? Ou un autre problème ?
