Angular - Как изменить шаблон моей Директивы на два разных шаблона?

Question

Я унаследовал угловое приложение, и он использует одну директиву для установки стиля для всех сеток, используемых в приложении. Теперь клиент хочет, чтобы одна из сетей была другой. Как использовать одну Директиву и создавать несколько шаблонов Grid для разных сеток? используя теперь для всех сетей:

template: '<div class="gridStyle"><button>Delete</button>' 

необходимости в нескольких сетей:

template: '<div class="gridStyle"><button>Delete</button> 
template: '<div class="gridStyleA"><button>Add</button> 

Answer 1

Не зная больше о вашей ситуации, вы могли бы попробовать что-то вдоль линий следующего:

Использования Директива в надбавке:

<myDirective useClass="gridStyleA"></myDirective> 

Затем, в пределах директива:

template: '<div class="{{useClass}}"><button>Add</button>' 

Обратите внимание, что я не уверен, как эта директива используется в вашей разметке. Кроме того, это может измениться в зависимости от того, имеет ли ваша директива область выделения или нет.

Answer 2

Лучший способ сделать это - установить template/templateUrl как функцию, которая получает attrs как второй параметр, поэтому вы можете решить.

Вы можете увидеть его работы здесь: https://plnkr.co/edit/8WKEH2UkFecLdeAz3h0t?p=preview

templateUrl: function(element, attrs) { 
     return (attrs.type === 'vertical') ? 
     'numbers-vertical.html' : 
     'numbers-horizontal.html'; 
    } 

Но чистый дизайн это должно быть только визуальное различие, а не функциональный,