У меня есть директива, которая использует три разных шаблона:
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, которая вызывает, например, цвет заголовка панели не отображается.
Как я могу заставить этот пример работать так, чтобы он имел ту же структуру HTML, что и без ng-include, чтобы Bootstrap продолжал работать?
Проблема в том, что bootstrap css очень специфичен для ориентации заголовка панели как прямого дочернего элемента панели с использованием селекторов типа .panel-warning>.panel-heading
.
Дополнительный <div>
для ng-include
нарушает это дочерние отношения, делая это
<div class="panel">
<div ng-include>
<div class="panel-heading>
Некоторые возможные варианты:
Добавьте соответствующие классы в div ng-include
div
Скопируйте правила css и замените селектор >
в селекторе пробелом
Используйте собственную директиву вместо ng-include и в пределах набора опций replace:true
ng-include
: jsfiddle.net/gxr49h96/7
<div ng-include=...>
вместо добавления в качестве содержимого?ng-include
добавляет дополнительный div, который заставляет Bootstrap теперь правильно отображаться. Как бы мне лучше получитьng-include
чтобы не включать этотdiv
, например,replace=true
какого-нибудь вида, возможно.