javascript - Angular: 前のセクションを非表示にする前に次のセクションを表示 - ng-show を使用

Question

この例 に基づいて、Angularで再利用可能な段階的なウィザード ディレクティブを実装しています。それはかなりうまくいっていますが、例のように、現在のステップ以外のすべてのステップを非表示にするために ng-show を使用しています。これにより、現在のステップと次のステップの両方が同時に表示されているステップを変更するたびに、ちらつきが発生します。私が理解できないのは、ちらつきをなくして、一度に 1 つのステップだけが表示されるようにする方法です。

私が試したこと: この問題を解決するための私自身の最初の試みは、show/hide-mechanic を ng-switch を使用するように変更することでしたが、ng-switch-when ディレクティブは文字列のみを受け入れるため、うまく機能しません (したがって、インデックスを自動的に入力しないでください)。さらに、 ng-switch-when はトランスクルージョンを介して機能します。つまり、1 つの要素に 2 つのトランスクルージョン ディレクティブがあり、意味がありません。

現在実装しているウィザード ディレクティブは次のようになります。

// Wizard
// ======
//
// This component implements a wizard-directive and a dependent step-directive
// which together can be used to define a step-by-step wizard with arbitrary
// html in each step.
//
// Ex:
// ```html
// <wizard>
//     <step>
//         <h1>Step one</h1>
//     </step>
//     <step>
//         <h1>Step two</h1>
//     </step>
// </wizard>
// ```
//
angular.module('wizard', [])


// Wizard Directive
// ----------------
//
// The main directive which defines the wizard element. A wizard can contain
// arbitrary html, but will only display a single step-element at a time. The
// directive also defines a couple of ways to navigate the wizard - through
// buttons and bottom "tabs".
//
.directive('wizard', function($rootScope) {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        templateUrl: $rootScope.templateBasePath + '/components/wizard/wizard.html',
        controller: function($scope, $element) {
            // Initialize the array of steps. This will be filled by any child
            // steps added to the wizard.
            var steps = $scope.steps = [];

            // Search through the wizard to find what step is currently visible.
            function getCurrentStepIndex() {
                var index;
                angular.forEach(steps, function(step, i) {
                    if (step.selected) {
                        index = i;
                        // End early when the selected step is found.
                        return;
                    }
                });
                return index;
            }

            // Make the imagePath available to the template.
            $scope.imagePath = $rootScope.imagePath;

            // Move to the next step in the wizard.
            $scope.next = function () {
                var index = getCurrentStepIndex();
                if (index < steps.length - 1) {
                    steps[index].selected = false;
                    steps[index+1].selected = true;
                }
            };

            // Move to the previous step of the wizard.
            $scope.previous = function () {
                var index = getCurrentStepIndex();
                if (index > 0) {
                    steps[index].selected = false;
                    steps[index-1].selected = true;
                }
            };

            // Select a given step in the wizard.
            $scope.select = function(step) {
                angular.forEach(steps, function(step) {
                    step.selected = false;
                });
                step.selected = true;
            };

            $scope.onFirstStep = function() {
                return getCurrentStepIndex() === 0;
            }

            $scope.onLastStep = function() {
                return getCurrentStepIndex() === steps.length - 1;
            }

            // Called by the step directive to add itself to the wizard.
            this.addStep = function(step) {
                // Select the first step when added.
                if (steps.length === 0) {
                    $scope.select(step);
                }
                // Add the step to the step list.
                steps.push(step);
            };
        }
    };
})

// Step Directive
// --------------
//
// The Step Directive defines a section of code which constitues a distinct step
// in the overall goal of the wizard. The directive can only exist as a direct
// child of a wizard-tag.
//
.directive('step', function() {
    return {
        require: '^wizard', // require a wizard parent
        restrict: 'E',
        transclude: true,
        scope: true,
        template: '<div class="wizard__step ng-hide" ng-show="selected"></div>',
        link: function(scope, element, attrs, wizardCtrl, transclude) {
            // Add itself to the wizard's list of steps.
            wizardCtrl.addStep(scope);

            // Make the wizard scope available under "wizard" in the transcluded
            // html scope.
            scope.wizard = scope.$parent.$parent;

            // Transclude the tag content in order to set the scope. This allows
            // the content to access the wizard's next() and previous() functions.
            var transDiv = angular.element(element).find('.wizard__step');
            transclude(scope, function (clone) {
                transDiv.append(clone);
            });
        }
    };
});

対応するウィザード テンプレートは次のようになります。

<div class="wizard" tabindex="1">
    <div class="wizard__display">
        <div class="wizard__previous" ng-click="previous()"><div class="guideBack" ng-hide="onFirstStep()"></div></div>
        <div class="wizard__content" ng-transclude></div>
        <div class="wizard__next" ng-click="next()"><div class="guideNext" ng-hide="onLastStep()"></div></div>
    </div>
    <ul class="nav wizard__tabs">
        <li ng-repeat="step in steps" ng-click="select(step)" ng-class="{active:step.selected}"></li>
    </ul>
</div>