Параметры директив

С помощью дополнительных свойств мы можем настроить применение директивы. Рассмотрим два свойства: link и restrict.

Свойство link позволяет задать функцию директивы. А свойство restrict позволяет указать объект, к которому директива будет применяться. Оно может иметь следующие значения:

• E: директива применяется к элементу

• A: директива применяется к атрибуту

• C: директива применяется к классу

• M: директива применяется к комментарию

Данные значения можно комбинировать.

Например, возьмем директиву из прошлой темы и используем выше рассмотренные свойства:

questApp.directive("answerList", function () {
	return {
		link: function (scope, element, attrs) {
		
			var data = scope[attrs["answerList"] ||attrs["source"]];
			
			if (angular.isArray(data.answers)) {
				var divElem = angular.element("<div>").addClass("answers");
				if (element[0].nodeName == "#comment") {
					element.parent().append(divElem);
				} 
				else {
					element.append(divElem);
				}
				for (var i = 0; i < data.answers.length; i++) {
					var answerElem = angular.element('<div>').addClass("answer");
					var voteElem = angular.element('<div>').addClass("vote");
					
					var voteUpElem = angular.element('<a>').addClass("vote-up");
					voteElem.append(voteUpElem);
					var rateElem = angular.element('<span>').addClass("rate").text(data.answers[i].rate);
					voteElem.append(rateElem);
					var voteDownElem = angular.element('<a>').addClass("vote-down");
					voteElem.append(voteDownElem);
					answerElem.append(voteElem);
					
					answerElem.append(angular.element('<b>').text(data.answers[i].text));
					answerElem.append(angular.element('<p>').text(data.answers[i].author));
					var iElem =angular.element('<i>').text(data.answers[i].date);
					var dateElem = angular.element('<p>').append(iElem);
					answerElem.append(dateElem);
					divElem.append(answerElem);
				}
			}
		},
		restrict: "EACM"
	}
});

В данном случае директива применяется ко всем четырем типам объектов. Рассмотрим, как применять директиву к отдельным объектам.

Загрузить проект

Применение директивы к элементам

Для применения директивы к элементам, нам надо создать соответствующий элемент:

<answer-list source="question" />

Здесь добавлен еще один атрибут - source, который принимает данные для директивы. Тогда в самой директиве нам надо изменить метод получения данных:

var data = scope[attrs["answerList"] ||attrs["source"]];

Применение директивы к классам

Преобразуем элемент в следующий:

<div class="answer-list: question"></div>

Код директивы остается тем же.

Применение директивы к комментариям

Комментарий в коде html должен начинаться со слова directive, за которым следует двоеточие, имя директивы и объект, передаваемый в директиву:

<!-- directive: answer-list question -->

Тогда в коде директивы определяются два возможных пути: если директивы применяется к комментарию и остальные случаи

if (element[0].nodeName == "#comment") {
	element.parent().append(divElem);
} 
else {
	element.append(divElem);
}