angular:angularjs:custom_directive:inject_template []

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

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>, которое определен внутри элемента, к которому применяется директива.

Инструменты пользователя

Инструменты сайта

Боковая панель

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

Инструменты страницы