Redirect from within Angular controller if condition is met at start of page

Question

I have an Angular app used to track hours worked by the user. When the user adds a new job, they are taken through a wizard, with each page/controller adding a new property to the job object. Once the wizard is complete, the user can start tracking by navigating to the jobs home page from the app main page.

It is, however, possible to exit the wizard before it is completed (via the back button) and then navigate to the home page of the job. What I need is for the controller for that home page to redirect to the appropriate wizard page for whichever job property is missing.

The job variable is retrieved from local storage at the start of the controller code.

var job = DatastoreService.objectJob();
    job.initFromHash($routeParams.jobHash);


function checkJobProps(prop, route){
        if(!job.data.hasOwnProperty(prop))
            $location.path('/wizard/add-position/' + $routeParams.jobHash + '/' + route);
    }

    checkJobProps('taxSettings', 'tax');
    checkJobProps('payrollSettings','payroll-opt');
    checkJobProps('breaks', 'breaks');
    checkJobProps('allowances', 'allowances');
    checkJobProps('deductions', 'deductions');
    checkJobProps('generalSettings', 'general-settings');

There is code below this on the controller that breaks if certain properties are not available. None of these function calls execute fast enough to prevent errors. They will redirect, but not elegantly and it will also always be the last one in the list that takes effect.

Do I do this with a promise? The navigation that is used from the home page of the app to the home page of each job is a directive so, I guess it may be possible to init the job from the $routeParams.jobhash and check these properties within the directive, but I would have to learn more about directives first.

Any help would be much appreciated.

Answer 1

$location.path() is asynchronous and will not prevent the code that follows it from executing. You will have to manually stop the execution with a return statement.

Note that the return statement must belong to the controller function block. You cannot put it inside another function since that will only stop the execution of that specific function.

Something along these lines should work:

var job = DatastoreService.objectJob();
job.initFromHash($routeParams.jobHash);

var redirectPath;

function checkJobProps(prop, route) {

  if (redirectPath || job.data.hasOwnProperty(prop)) return;
  redirectPath = '/wizard/add-position/' + $routeParams.jobHash + '/' + route;
}

checkJobProps('taxSettings', 'tax');
checkJobProps('payrollSettings', 'payroll-opt');
checkJobProps('breaks', 'breaks');
checkJobProps('allowances', 'allowances');
checkJobProps('deductions', 'deductions');
checkJobProps('generalSettings', 'general-settings');

if (redirectPath) return $location.path(redirectPath);

... rest of the code ...