javascript - Angular UI 中的 Accordion 式标题图像

Question

所以我目前正在将我的项目从 jQuery 移植到 AngularJS，我在 jQuery 中有以下代码

jQuery 代码

$(document).ready(function()
{
    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };

    $( "#Session" ).accordion({
      icons: icons
    });
}); 

我在 AngularUI 中找不到任何图标选项。是否有任何解决方法可以在 AngularUI Accordion 中添加标题图像？尝试使用很棒的字体作为图标

<accordion-group heading="My Current Sessions" class="icon-book">
      <div>Content Goes here</div>
</accordion-group>

上面的代码的图标和标题位于相邻行，而不是同一行。

Answer 1

如果您使用 http://angular-ui.github.io/bootstrap/ 中的 Accordion 指令并且想要在 Accordion 标题中使用自定义 HTML，您可以使用 <accordion-heading> <accordion-group> 内的元素(而不是依赖 heading 属性)。

这是一个例子:

<accordion>
    <accordion-group>
      <accordion-heading>
        Put any HTML <strong>here</strong><i class="icon-book"></i>
      </accordion-heading>
      This content is straight in the template.
    </accordion-group>
  </accordion>

工作中的笨重:http://plnkr.co/edit/E4QtpTYpHkMmcZhUPZsK?p=preview