为两个视图创建指令

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。页面上的其他所有内容都将保持不变。