我正在基于此示例以角度实现可重用的分步向导指令。它工作得很好，但就像在示例中一样，我正在使用 ng-show 隐藏除当前步骤之外的所有步骤。每当我更改同时显示当前和下一步的步骤时，这都会导致快速闪烁。我想不通的是如何消除闪烁并确保在任何时候只显示一个步骤。
我尝试过的： 我自己解决此问题的最初尝试是将显示/隐藏机制更改为使用 ng-switch，但由于 ng-switch-when 指令仅接受字符串，因此效果不佳（所以我可以'不要用索引自动填充它）。此外，ng-switch-when 通过 translcusion 工作，这意味着我将在单个元素上有 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>