Изменение шаблона директивы с помощью ng-click

Question

У меня есть несколько кнопок с ng-click в контроллере, и я хочу изменить шаблон директивы, когда я нажимаю кнопку. Каков наилучший способ достичь этого? (Я позже использовать слайд в силу элемента)

Answer 1

Директива:

myModule.directive('foo', function() { 
    return { 
     scope: { 
      templateType: '@' 
     }, 
     template: '<div ng-if="templateType == \'a\'">' + 
      ' this is template A ' + 
      '</div>' + 
      '<div ng-if="templateType == \'b\'">' + 
      ' this is template B ' + 
      '</div>' 
    }; 
}); 

Шаблон:

<foo template-type="{{ templateType }}"></foo> 
<a ng-click="templateType = 'b'" href="">Set template to b</a> 

Контроллер:

$scope.templateType = 'a'; 

Answer 2

Вы можете расширить пример при условии, by @JB Nizet и использовать ng-include для замены шаблонов, а управление шаблонами большего размера становится проще.

myModule.directive('foo', function() { 
    return { 
     scope: { 
      templateType: '@' 
     }, 
     template: '<div ng-include="\'/templateRoot/\' + templateType">'+ 
        '</div>' 
    }; 
}); 

Теперь вы можете создавать отдельные файлы шаблон и сделать их доступными по конкретной URL (в данном случае /templateroot/a или /templateroot/b)