Шаблоны директив

В прошлых темах мы рассмотрели создание директив, в которых применялось 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, которое позволяет установить адрес шаблона.