Динамический шаблон в директиве на основе атрибутов?

Question

Ive видел кучу вопросов, очень похожих на это, но я новичок в Angular, поэтому они не довольно смысл. Вот мой sitaution:

У меня есть директива, определенный:

robus.directive("titlebar", function() { 
    return { 
    restrict: "E", 
    scope: { title: '@title' }, 
    template: "<header class='bar-title'><h1 class='title'>{{title}}</h1></header>", 
    replace: true 
    } 
}); 

Я использую эту директиву, как это:

<titlebar title="{{workout.name}}"></titlebar> 

В идеале, я хочу, чтобы добавить дополнительные атрибуты в этом, как:

<titlebar title="{{workout.name}}" editButton="true" closeButton="true"></titlebar> 

Как обращаться с ними в определении template? Я читал о функции $compile(), которую мне нужно переопределить, но я не знаю, как это сделать. Шаблоны - это просто строки, поэтому я чувствую, что могу просто сделать их inline и ссылаться на них как на отдельные файлы.

Спасибо!

Answer 1

Сделайте их доступными в рамках директивы, добавив их в оператор scope, так же, как у вас есть заголовок. Затем добавить кнопки в шаблон, и conditionalize их так:

robus.directive("titlebar", function() { 
    return { 
    restrict: "E", 
     scope: { title: '@title', edit: '@editButton', cancel: '@cancelButton' }, 
     template: "<header class='bar-title'><h1 class='title'>{{title}}</h1><span ng-show='edit'>Edit</span><span ng-show='cancel'>Cancel</span></header>", 
    replace: true 
    } 
}); 

<titlebar title="{{workout.name}}" edit-button="true" cancel-button="false"></titlebar> 

Обратите внимание, что это editButton в директиве и редактирования кнопки в HTML; есть встроенное преобразование из дефиса в верблюд-футляр, который вас укусит, если вы не знаете об этом.

Кроме того, я рекомендую использовать transclude здесь, как я думаю, что он будет читать немного почище:

robus.directive("titlebar", function() { 
    return { 
    restrict: "E", 
     scope: { edit: '@editButton', cancel: '@cancelButton' }, 
     template: "<header class='bar-title'><h1 class='title' ng-transclude></h1><span ng-show='edit'>Edit</span><span ng-show='cancel'>Cancel</span></header>", 
    transclude: true, 
     replace: true 
    } 
}); 

<titlebar edit-button="true" cancel-button="false">{{workout.name}}</titlebar>