Внедрение шаблонов

Последнее обновление: 26.04.2017

AngularJS при создании директив поддерживает такую функциональность как transclusion, которая представляет внедрение html-кода извне в шаблон. Например, возьмем директиву answerList из прошлой темы и изменим ее

questApp.directive("answerList", function () {
	return {
		restrict: "A",
		templateUrl: "templates/answersTemplate.html",
		transclude: true
	}
});

Параметр transclude: true подключает функциональность внедрения.

Теперь изменим файл шаблона answersTemplate.html:

<div class="answers">
<div ng-transclude></div>
<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 | formatText}}</b>
<p>{{answer.author}}</p>
<p><i>{{answer.date}}</i></p>
</div>
</div>

По сравнению с кодом из прошлой темы здесь был добавлен элемент <div ng-transclude></div>. Директива ng-transclude указывает, что в этот элемент будет внедряться внешний код.

Этот код будет указан на главной странице index.html в элементе, к которому применяется директива директивы:

<!doctype html>
<html ng-app="questApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
<div  ng-controller="QuestionController">
<div class="quest">
<h3>{{question.text}}</h3>
<p>{{question.author}} </p> <p><i>{{question.date}}</i></p>
</div>
<div answer-list><h3>Ответы</h3></div>
</div>

<script src="js/lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/QuestionController.js"></script>
<script src="js/answerList.js"></script>
<script src="js/filter.js"></script>
<script>
</script>
</body>
</html>

Теперь в блок <div ng-transclude></div> будет внедряться элемент заголовка <h3>Ответы</h3>, которое определен внутри элемента, к которому применяется директива.

Transclusion in AngularJS

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850