В моем угловом выражении есть фрагмент кода, который повторяется в двух файлах. Я сделал это директивой, чтобы ее можно было повторно использовать. Я отправляю ему некоторые данные.
Предположим, что это шаблон:
<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.
Можно использовать только одну директиву. Добавьте дополнительный атрибут в директиву.
<directive1 data="object" type="page1"></directive1>
Для вызова со второй страницы, где вам нужны дополнительные стили:
<directive1 data="similarObject" type="page2"></directive1>
Предположим, что дополнительные css-строки кода находятся в классе extra-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>
ng-show="[your flag here]"
в последний div.