Directive attribute to choose whether step-indicators are before or after

[amatecha]

Would be cool to be able to set whether the step-indicators appear before or after the steps container (for ease of styling/layout). If I get some free time I'll do it myself and submit a PR, but not sure when I'll get a chance. ;)

[timmaybrown]

Definitely being able to customize the indicators placement and style via provider would be awesome. If I hack it I'll try to submit a PR.

[joseym]

Its fairly easy to make this happen via a decorator

Add an Attribute to allow for position assignment

angular.module('myApp')
  .config(function($provide) {
    /**
     * Hijacking wizard directive
     * need to be able to add methods to the scope
     * also want to be able to have more control over our own
     * customer template
    */
    $provide.decorator('wizardDirective', function($delegate) {
      var directive, link;
      directive = $delegate[0];
      link = directive.link || function(scope) {};
      directive.templateUrl = function(element, attrs) {
        return attrs.template || "app/components/wizard/wizard.html";
      };
      directive.compile = function() {
        return function(scope, element, attrs, ctrls) {
          scope.stepLocation = attrs.stepLocation || "bottom";
          return link.apply(this, arguments);
        };
      };
      return $delegate;
    });
    return $logProvider.debugEnabled(true);
  }));

Default to your own template

(default template is overwritten in the above decorator)

<div>
  <div ng-if="stepLocation == 'bottom'" class="steps" ng-transclude></div>
  <ul class="steps-indicator steps-{{getEnabledSteps().length}}" ng-if="!hideIndicators">
    <li ng-class="{default: !step.completed && !step.selected, current: step.selected && !step.completed, done: step.completed && !step.selected, editing: step.selected && step.completed}" ng-repeat="step in getEnabledSteps()">
      <a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>
    </li>
  </ul>
  <div ng-if="stepLocation == 'top'" class="steps" ng-transclude></div>
</div>

Now you can add an attribute to your wizard to specify step indicator

<wizard on-finish="finishedWizard()" step-location="top"> 
  <wz-step title="Starting">
    <h1>This is the first step</h1>
    <p>Here you can use whatever you want. You can use other directives, binding, etc.</p>
    <input type="submit" wz-next value="Continue" />
  </wz-step>
  <wz-step title="Continuing" canenter="item.validateStep">
    <h1>Continuing</h1>
    <p>You have continued here!</p>
    <input type="submit" wz-next value="Go on" />
  </wz-step>
  <wz-step title="More steps" canenter="item.validateStep">
    <p>Even more steps!!</p>
    <input type="submit" wz-next value="Finish now" />
  </wz-step>
</wizard>

[geostima]

You can simply use css to put the steps container above the wizard. Way quicker and easier. :)
I have done this more than once now with this wizard and it was flawless. CSS is your friend.

[jacobscarter]

We always suggest writing your own custom CSS but I see the value of actually moving the steps in the DOM to be before the container. If you submit a PR I will happily merge, but I will close this ticket for now.