0

I have two problems with ui-router state transition:

  • When transitioning from a parent state to a child state, the parent state is resolved again, which I think should not happen. This happens only when transitioning the first time, all other times it works as expected.
  • If user refreshes the page using browser refresh, the parent states are resolved twice. I understand that the parent state would resolve if I refresh a child state. But that should resolve once. It is resolving twice.

The code that I am using:

$stateProvider
  .state("root.test", {
    abstract: true,
    url     : "/abc",
    template: '<ui-view/>'
  })
.state("root.test.edit", {
    url  : "/:testId",
    views: {
      "@": {
        template  : require('../edit.html'),
        controller: "TestEditController"
      }
    },
    params: {
      testObject: {value: null}
    },
    redirectTo: 'root.test.edit.select',
    resolve: {
      testObject: function () {
        console.log('test object resolved');
      }
    }
  })
.state("root.test.edit.select", {
    url  : "/select",
    views: {
      "main@root.test.edit": {
        template  : require('../select.html'),
        controller: "TestEditSelectController"
      }
    },
    resolve: {
      selectObject: function () {
        console.log('select object resolved');
      },
    }
})
.state("root.test.edit.select.dialogBox", {
    params: {
      testObject: {value:null}
    },
    resolve: {
      testObject: function () {
        console.log('dialog box opens');
      },
    },
    onEnter: ['$state', '$uibModal',
      function ($state, $uibModal) {
        $uibModal.open({
          template  : require('../dialogBox.html'),
          controller: 'DialogBoxController',
          resolve   : {
            testObject: function () {
              return testObject;
            }
          }
        }).result.then(function (testObject) {
          $state.go('root.test.edit.select', { testObject: testObject}, {reload: true});
        }, function () {
          $state.go('root.test.edit.select');
        }
      );
      }]
})

For the first problem mentioned above:

If I am in root.test.edit.select state and when I click on a button to open a dialog box which is the state root.test.edit.select.dialogBox, test object resolved -> select object resolved -> dialog box opens everything is printed on the console, meaning all parents are resolved. But when I close the dialog box and open it again, only dialog box opens is printed, which is how it should be even when opening the dialog box for the first time.

For the second problem mentioned above:

If I am in root.test.edit.select state and I refresh the page using browser button, test object resolved -> select object resolved -> test object resolved -> select object resolved is printed i.e. both parent and child are resolved twice.

I checked for my mistakes as mentioned here, but everything is fine according to that post.

Jagrut
  • 922
  • 7
  • 21
  • It could be a result of your non-standard redirectTo functionality or the `$state.$go` in your `onEnter` handler. By design, the router will only execute resolves once and only if the state is not already active. – JC Ford Mar 26 '18 at 17:54
  • @JCFord Why is it a non-standard functionality? Can you let me know any way to circumvent this? – Jagrut Mar 27 '18 at 12:36
  • My mistake. `redirectTo` is a built-in feature of ui-router 1.0. In any case, comment out the redirection and state transition code. Pare the state config down to the minimum and then start re-adding features while you keep an eye on the resolve behavior. That's how you can track it down. – JC Ford Mar 28 '18 at 15:39

0 Answers0