Angular reload window then go to a new state

657 Views Asked by At

Background

I have a large angular app with many forms for many items.

I have lists of action objects.

These actions have schemaforms.

These actions form's dropdown's differ from one action to the next. (the dropdown's contents depends on which company the action is a child of)

These dropdowns contents were not changing unless I reloaded the page.

Question

How do I do a window reload then a state.go change?

Code

  $scope.goToActionWizardFull = function(CUuid, AUuid) {
    $window.location.reload();
    $state.go('actionWizard', { companyUuid: CUuid, uuid: AUuid });
  }

Current problem:

This code is supposed to clear the older schema from the cookies/local storage/etc so that the dropdowns show the current action's dropdown contents not the last action's dropdown contents. Then take you to the new action's page.

This code, instead, takes the user to the actionWizard page, then takes them back to the company page.

Extra context

I am loading the dropdown contents from a file called sharedVars here:

.controller('ActionController', function ($scope, $stateParams, $state, $window, sharedVars, Company, Action) {

I am loading it here:

$scope.actionSchema = sharedVars.getActionSchema();

Then changing it here:

$scope.actionSchema.properties.RDAInput.items.properties.input_location.enum = $scope.actionSchema.properties.RDAInput.items.properties.input_location.enum.concat(eachRDSchemaProperty['name'])

Then I load the Form.

This is all in http://schemaform.io

EDIT 2

HTML for whole form:

<form sf-schema="actionSchema" sf-form="actionForm" sf-model="actionModel" name="submittableActionForm">
</form>

EDIT 3

my bower.json looks like:

{
  "name": "isp",
  "appPath": "src/main/web",
  "moduleName": "ispApp",
  "version": "0.0.1",
  "dependencies": {
    "jquery": "2.1.1",
    "angular": "1.6.1",
    "json3": "3.3.2",
    "angular-ui-router": "0.4.1",
    "angular-resource": "1.6.1",
    "angular-sanitize": "1.6.1",
    "checklist-model": "0.10.0",
    "jsog": "1.0.7",
    "angular-schema-form": "^0.8.13",
    "angular-schema-form-bootstrap": "^0.2.0",
    "bootstrap": "3.3.7",
    "angular-cookies": "1.6.1"
  },
  "resolutions": {
    "angular": "1.6.9"
  },
  "install": {
    "path": "src/main/web/bower_components"
  }
}

So, I do not have ngRoute, but I do have angular-ui-router

EDIT 4

I have attempted to reload using $state but the dropdown still does not reload effectively. So, the 1st line here seems to have no effect.

$state.go($state.current, {}, {reload: true});
$state.go('actionWizard', { companyUuid: CUuid, uuid: AUuid });

EDIT 5

This also does not work:

$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
}) 
$state.go('actionWizard', { companyUuid: CUuid, uuid: AUuid });

EDIT 6

I have opened a new question here that I believe gets closer to the heart of the issue: Reload a pages cache, then go to a new page

1

There are 1 best solutions below

0
Rorschach On

This answer only uses $window to do a reload upon entering the action page. But avoids recursion by using a hash.

    var currentHref = $window.location.href
    if (!currentHref.includes("refresh")) {
        $window.location.href = $window.location.href + "#refresh"
        $window.location.reload(true);
    }

More explanation below

This code enables a full reload after a redirect. It is run upon entering the new page.

First time through, the url does not contain 'refresh', so $window.location.href changes to contain 'refresh'. BUT this does not reload the page. Only the line after it reloads the page and clears the cache. But, the reload only happened after the hash was added.

So, I engaged in a full reload without an infinite loop that happens automatically upon entering the page