Частицы в угловых, но не ng-include/директивах

Question

В моем угловом выражении есть фрагмент кода, который повторяется в двух файлах. Я сделал это директивой, чтобы ее можно было повторно использовать. Я отправляю ему некоторые данные.

Давайте предположим, что это шаблон:

<directive1 data="object"></directive1> 

Вот HTML директивы 1

<div class="a">{{data.x}}</div> 
<div class="b">{{data.y}}</div> 
<div class="c">{{ data.z}}</div> 

Теперь, скажем, на какой-нибудь другое место, я хочу иметь только две вышеупомянутые линии шаблон. Поскольку css полностью отличается от этого, я решил создать другую директиву вместо того, чтобы вводить логику коммутации в директиве.

<directive2 data="similarObject"></directive2> 

Так что теперь вопрос, я хочу, чтобы это в моей директиве 2 HTML:

<div class="a">{{data.x}}</div> 
<div class="b">{{data.y}}</div> 

Но так как это будет дублироваться я запутался, как идти о делать это. Я не хочу использовать ng-include, так как он загружает шаблон асинхронно с клиентской стороны. Я просто хочу, чтобы мой код был модульным, поэтому HTML не дублируется. Я не возражаю, если HTML дублируется после сборки с моей системой глотков.

Нет ли каких-либо включений, которые включены во время компиляции? Поскольку я использую gulp как мою систему сборки, я надеюсь, что что-то вроде этого существует, так что я могу сделать что-то вроде require('./something'), как будто я делаю это в своем Javascript.

Answer 1

Можно использовать только одну директиву. Добавьте дополнительный атрибут в директиву.

<directive1 data="object" type="page1"></directive1> 

Для вызова со второй страницы, где требуются дополнительные стили:

<directive1 data="similarObject" type="page2"></directive1> 

Пусть дополнительные CSS строки кода в экстра-Css класса. Следовательно, мы будем устанавливать класс условно.

<div class="a" ng-class="{ 'extra-css' : type === 'page2' }">{{data.x}}</div> 
<div class="b" ng-class="{ 'extra-css' : type === 'page2' }">{{data.y}}</div> 
<div class="c" ng-if="type === 'page1'">{{ data.z}}</div>