Sample Wizard

http://angularjs.org/

by rocketegg0

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <wizard title='"blah"'>
        
        <wizard-step body='"Step 1"'></wizard-step>
        <wizard-step body='"Step 2"'></wizard-step>
        <wizard-step body='"Step 3"'></wizard-step>
    </wizard>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.steps = [];
    $scope.currentStep = 0;
    
    $scope.prevStep = function() { 
        if ($scope.currentStep > 0) {
            $scope.currentStep--;
            $scope.setStep($scope.currentStep);
        }
    };
    
    $scope.nextStep = function() { 
        if ($scope.currentStep < $scope.steps.length - 1) {
            $scope.currentStep++;
            $scope.setStep($scope.currentStep);
        }
    };
    
    $scope.setStep = function(stepNum) {
        $scope.steps.forEach(function(s) { s.selected = false; });
        $scope.steps[stepNum].selected = true;
    }
    
    this.addStep = function(stepScope) {
        $scope.steps.push(stepScope);
        $scope.setStep(0);        
    };
    
    this.getStep = function() {
        return $scope.currentStep;
    }
});

myApp.directive('wizard', function() {
    return {
        restrict: 'EA',
        scope: {
            title: '='
        },
        transclude: true,
        controller: 'MyCtrl',
        template: " \
            <div> Top Level {{ title }}.  \
                I have {{ steps.length }} steps. \
                I am on step {{ currentStep }}. \
            </div> \
            <p> <button ng-click='prevStep()'>prev</button> \
                <button ng-click='nextStep()'>next</button> \
            <div ng-transclude></div>"
        
    }

}).directive('wizardStep', function() {
    return {
        restrict: 'EA',
        require: '^wizard',
        transclude: true,
        scope: {
            body: '='
        },
        template: "<li ng-transclude> \
                        <span ng-show='selected'> \
                            <b>HERE -> </b> \
                        </span> \
{{ body }} parent says I'm on step: {{ parent.getStep() }}\
                    </li>",
        link: function(scope, element, attrs, parentCtrl) {
            parentCtrl.addStep(scope);
           ...