В прошлых темах мы рассмотрели создание директив, в которых применялось API jqLite с использованием метода angular.element() и т.д. Но есть альтернативный подход, который заключается в использовании шаблонов. Функциональность шаблонов построена вокруг свойства: template.
Используем шаблоны в директиве:

questApp.directive("answerList", function () {
    return {
        link: function (scope, element, attrs) {
 
            scope.data = scope[attrs["answerList"]];
        },
        restrict: "A",
        template: "<div class='answers'>" +
        "<div ng-repeat='answer in data.answers' class='answer'>" +
            "<div class='vote'>" +
            "<a class='vote-up' ng-click='voteUp(answer)'></a>" +
            "<span class='rate'>{{answer.rate}}</span>" +
            "<a class='vote-down' ng-click='voteDown(answer)'></a>" +
        "</div>" +
        "<b>{{answer.text}}</b>" +
        "<p>{{answer.author}}</p>" +
        "<p><i>{{answer.date}}</i></p>" +
    "</div></div>"
    }
});

В шаблонах используются все те же стандартные директивы и выражения AngularJS.

Чтобы упростить использования шаблонов, мы можем использовать внешние файлы для их хранения. Создадим рядом с главной страницей index.html папку templates. Добавим в нее новый файл answersTemplate.html со следующим содержимым:

<div class="answers">
<div ng-repeat="answer in question.answers" class="answer">
<div class="vote">
    <a class="vote-up" ng-click="voteUp(answer)"></a>
    <span class="rate">{{answer.rate}}</span>
    <a class="vote-down" ng-click="voteDown(answer)"></a>
</div>
<b>{{answer.text}}</b>
<p>{{answer.author}}</p>
<p><i>{{answer.date}}</i></p>
</div>
</div>

Теперь проект выглядит следующим образом:

По сути это весь тот код, который ранее был заключен в свойстве template. Теперь изменим директиву answerList следующим образом:

questApp.directive("answerList", function () {
    return {
        link: function (scope, element, attrs) {
 
            scope.data = scope[attrs["answerList"] ||attrs["source"]];
        },
        restrict: "A",
        templateUrl: "templates/answersTemplate.html"
    }
});

Теперь вместо свойства template используется свойство templateUrl, которое позволяет установить адрес шаблона.