0

I'm trying to create a modal which will maintain a state.

Whenever the child state is invoked, the parent state is loaded again (second time). Is it possible to prevent the loading of parent state when the child state is invoked?

Here is the code. Please comment if more information is necessary.

.state('parent', {
    url: "/name/:id/:param1",
    templateUrl: "app/partials/parent.html",
    params: {
        param1: {
            value: null,
            squash: true
        }
    }
})
.state('parent.child', {
    url: "/:child",
    template: "<div class='some_name'></div>",
    onEnter: function (ngDialog, $state, $stateParams) {
        ngDialog.open({
            templateUrl: '/app/partials/dialog.html'
        }).closePromise.then(function () {
            $state.go('name', $stateParams);
        });
    }
});

parent.html

<a class="some_class" 
    ui-sref="parent.child({id: id, param1: param1?param1:null,child: 'child'})">
    Open Child
</a>

I'm trying to show a modal in a child state and when the modal is closed, the app returns to the parent state.

kvn
  • 2,210
  • 5
  • 20
  • 47
  • What do you mean by parent state being loaded again? What exactly happens that you're trying to prevent? – Merott Dec 10 '15 at 11:34
  • All the API calls which are being called in my parent controller are being called again, which is absolutely waste. – kvn Dec 10 '15 at 11:36

1 Answers1

1

You could move your parent controller's logic into some sort of activate function, if you haven't already, then do a check before you call activate().

Here is a simplified example:

.state('parent', {
    url: "/parent",
    template: "<div class='parent'></div>",
    controller: ParentController,
  })
  .state('parent.child', {
    url: "/child",
    template: "<div class='child'></div>",
    controller: ChildController
  });

function ParentController($state) {
  if ($state.is('parent')) {
    activate();
  }
}

ParentController.prototype.activate = function() {
  // load up resources, etc
}

function ChildController() {

}
Merott
  • 7,189
  • 6
  • 40
  • 52
  • Thanks for your answer. The problem was with using squash and setting a param as null. When the child state is triggered with param1 as null, angular considers the route to be parent as `/name/1234/{null}/child` is rendered as `/name/1234/child` (as we are using `squash: true`). This route is exactly similar to parent with `param1 = child`. – kvn Dec 10 '15 at 15:32