Creating Directive for two views

Question

I am trying to create a directive for two views. basically we have a modal, with header and footer. When we click on continue button in footer, the modal body should be alone changed displaying question 2 as a new view with header and footer fixed. How would i achieve this using directives? Do i need to create individual directives for each view? Here is my code

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

score 0 · Answer 1 · answered Oct 28 '15 at 15:00

It sounds like you may want to use the ngSwitch directive:

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

Then on your controller:

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

When $scope.questionNumber is updated, ngSwitch will change which of the divs it shows. Everything else on the page will remain the same.

I am wondering if this ng-click function should be assigned on scope of controller, or angular link function. Which is better? — nikitha, Oct 28 '15 at 15:10
easiest would be to assign it on the scope imo. Depending on how much data you want to show and how often the data will change you can also opt for `ng-if` in stead of `ng-switch` — ThomasS, Oct 28 '15 at 15:14

Creating Directive for two views

1 Answers1