Re-link an existing $scope? - angularjs

Question

Let me set some context first;
I am creating a wizard in angular, with these characteristics:
The steps in the wizard are big; each step has it's own controller / $scope / template.
The steps in the wizard are dynamic (step1's output decides whether the next step is step2a or step2b).
Of course, step-state should be preserved. When stepping back from step2 to step1, the data in the step1 view should still be there.
In my implementation, I've found a lot of inspiration in the codebase for ui-router.
Basically my approach is:
When going to a step, create a $scope for this step and use the $controller service to create the controller
$compile the step-template and link this step-template to the step-$scope
This all works out great.
However, I'm having doubts on my implementation to step back in the wizard:
To achieve this, I'm keeping an array of step-$scope objects for each step that has been taken.
Whenever stepping back (for instance from step2 back to step1), I:
look up the $scope for step1
re-$compile the template for step1 and re-link it to the $scope for step1
This seems to work, however:
Why can't I just re-use the compiled/linked template from step 1? (this way, I could keep references to the compiled/linked templates, not to the $scopes)
Is this re-$compiling / re-linking the right approach to take?
Thanks for your time,
Koen

Answer 1

I would use routing, using something along the lines
$routeProvider
.when('/wizard/:stepNr', {...})
(c.f. AngularJS docs: https://docs.angularjs.org/api/ngRoute/service/$route#example)
Your "back" and "next" buttons would just be a href like this:
Prev
Next
The Scopes of all steps will have one common $parent. So, Before going to the next step, you could store the important values there:
$scope.$parent.stepData[currentStepNr] = $scope.stepData;
whenever coming back to a step, the Scope of the left future step is automatically destroyed. All you need to do is
$scope.stepData = $scope.$parent.stepData[currentStepNr]; // load from parent scope into current scope
delete $scope.$parent.stepData[currentStepNr]; // discard in the parent scope
PS: the fact that the Parent Scope is common to all step scopes is a "special case" So you might want to use a Service for storing the data between steps, as suggested by #Bixi
EDIT: In case, the number of the next step is determined by an external web srevice, you can do (assuming a simple http call)
$http.get('/your/service').success(function(responseData){
/* grab nr of next step from responseData;
remember it and
use $location.$path to navigate to #/wizard/nextStep. */
$location.$path('/wizard/' + varContainingNumberOfNextStep);
});

Answer 2

First, how are you storing your data? For this kind of pattern, the best choice would be a service which stores your steps data. This service will be available through all your steps (controllers).
More information about services: https://docs.angularjs.org/guide/services
Next, you're talking about two solutions:
storing data and letting angular construct the screen from scratch again
storing fully compiled templates
The first solution is the angular standard behavior. To maintain a as-lightweight-as-possible DOM, angular removes previous ng-view DOM elements and replaces them with the new ones (new route). No problem here, it's angular's work and it does it well.
The second solution is possible. In my view, storing the compiled DOM would be overkill, instead you could just let it loaded in the browser (but showing/hiding its content via CSS)... But there are some disadvantages unlike method #1 (heavyweight DOM).
I think you should let angular construct your steps using only stored data.

Answer 3

Why not just to have the parent controller with some step flag and make some use of ngInclude capabilities to create new child scope?
mod.controller('WizardParentCtrl', function() {
this.step = '1';
})
Outer HTML:
<div ng-controller="WizardParentCtrl as WizardParent">
<div ng-include="'steps/'+WizardParent.step+'.html'"></div>
</div>
Inner HTML:
<div ng-controller="Step1Ctrl as Step1">
...
</div>
WizardParent will be accessible in the child controllers via scope inheritance, and you can communicate with it in order to save the data or change steps.