为两个视图创建指令-解网

问：

我正在尝试为两个视图创建一个指令。基本上我们有一个模态，带有页眉和页脚。当我们单击页脚中的“继续”按钮时，应单独更改模式正文，将问题 2 显示为页眉和页脚固定的新视图。我如何使用指令实现这一点？我是否需要为每个视图创建单独的指令？这是我的代码

模态 .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>

指令.js

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

JavaScript angularjs 使用指令

<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;
}

更新时，将更改它显示的 div。页面上的所有其他内容将保持不变。$scope.questionNumberngSwitch

为两个视图创建指令

Creating Directive for two views

评论

评论