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

为两个视图创建指令

1 个答案: