Question

我有一个使用三种不同模板的指令：

http://jsfiddle.net/edwardtanguay/pLrkya7r/4

这些模板每个都有一个面板，我希望它们包含一个标题模板，每个模板都是相同的，如下所示：

<script type="text/ng-template" id="itemMenuTemplateUndefined">
    <div class = "panel panel-default" > 
        <div ng-include="'itemMenuTemplatePanelHeading'"></div>
        <div class="panel-body">
            <div>Age: {{item.age}}</div>
        </div > 
    </div>
</script>

包含的模板如下所示：

<script type="text/ng-template" id="itemMenuTemplatePanelHeading">
        <div class="panel-heading">{{item.firstName}} <b>{{item.lastName}}</b> (PROBLEM INCLUDED BUT NO COLOR)</div>
</script>

问题是虽然它包含范围变量值和HTML，但它似乎没有相同的HTML结构，这导致例如面板标题颜色不显示。

如何使这个示例工作，使其具有与没有ng-include相同的HTML结构，以便Bootstrap继续工作？

Answer 1

问题在于bootstrap css在使用.panel-warning>.panel-heading等选择器将面板标题定位为面板的直接子节点时非常具体。

<div>的额外ng-include打破了这个儿童关系，使其成为

<div class="panel">
    <div ng-include>
       <div class="panel-heading>

一些可能的选择：

将适当的类添加到ng-include div
复制css规则并用空格替换选择器中的>
在选项中使用您自己的指令而不是ng-include 设置replace:true

如何在另一个中包含一个角度模板，以便引导类仍然有效？

1 个答案: