Как включить один угловой шаблон в другой, чтобы классы начальной загрузки все еще работали?

Question

Как включить один угловой шаблон в другой, чтобы классы начальной загрузки все еще работали?

0

У меня есть директива, которая использует три разных шаблона:

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 продолжал работать?

Edward Tanguay 19 авг. 2015, в 14:49

Источник

0

Вы имеете в виду, как шаблон может заменить элемент <div ng-include=...> вместо добавления в качестве содержимого?
New Dev 19 авг. 2015, в 12:56
0

Нет, я имею в виду то, что charlietfl идентифицировал ниже, что ng-include добавляет дополнительный div, который заставляет Bootstrap теперь правильно отображаться. Как бы мне лучше получить ng-include чтобы не включать этот div , например, replace=true какого-нибудь вида, возможно.
Edward Tanguay 19 авг. 2015, в 13:07

Теги:

angularjs

angularjs-directive

1 ответ

Ещё вопросы

Вы имеете в виду, как шаблон может заменить элемент <div ng-include=...> вместо добавления в качестве содержимого?
Нет, я имею в виду то, что charlietfl идентифицировал ниже, что ng-include добавляет дополнительный div, который заставляет Bootstrap теперь правильно отображаться. Как бы мне лучше получить ng-include чтобы не включать этот div , например, replace=true какого-нибудь вида, возможно.

charlietfl · Accepted Answer · 2015-08-19T10-01-00.000Z

Проблема в том, что 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

Отлично, я решил его с третьим предложением: jsfiddle.net/edwardtanguay/gxr49h96/3
Это замена, которую я предлагал, использует тот же шаблон, что и ng-include : jsfiddle.net/gxr49h96/7