Создание Директивы для двух видов

Question

Я пытаюсь создать директиву для двух представлений. в основном у нас есть модал, с верхним и нижним колонтитулом. Когда мы нажимаем кнопку "Продолжить" в нижнем колонтитуле, модальное тело должно быть изменено отдельно, отображая вопрос 2 в виде нового представления с фиксированными верхним и нижним колонтитулами. Как бы я достиг этого, используя директивы? Нужно ли создавать отдельные директивы для каждого представления? Вот мой код

modal.html -

<section>
    <header class="modal-header">
    </header>
    <div class="modal-body">
                question 1
    </div>
    <footer>
        <button>{{'BACK' | translate}}</button>
        <button type="submit" ng-click="showQuestion(2)">{{'CONTINUE' | translate}}</button>
    </footer>
</section>

directive.js

'use strict';
angular.module('OrderApp').directive('modalQuestions', [function () {
        function getQuestions() {
        return {
            restrict: 'A',
            templateUrl: 'modules/common/modals/modal.html',
            scope: true
        };
    }
]);

Answer 1

Похоже, вы можете использовать директиву ngSwitch:

<section>
    <header class="modal-header">
    </header>
    <div class="modal-body" ng-switch="questionNumber">
        <div ng-switch-when="1">
                question 1
        </div>
        <div ng-switch-when="2">
                question 2
        </div>
    </div>
    <footer>
        <button>{{'BACK' | translate}}</button>
        <button type="submit" ng-click="showQuestion(2)">{{'CONTINUE' | translate}}</button>
    </footer>
</section>

Тогда на вашем контроллере:

$scope.questionNumber = 1;
$scope.showQuestion = function (questionNumber) {
    $scope.questionNumber = questionNumber;
}

когда $scope.questionNumber обновляется, ngSwitch изменит, какой из div это показывает. Все остальное на странице останется прежним.