AngularJS parent controller is not invoking while going back from child

Question

I have AngluarJS view with listing of some items, user can delete/update each item by clicking on it. When user click one line item we are showing a child view . When user do some delete/update action on the line item I am re-loading the parent view using state.go function.

But my parent view controller is not getting called( statements in parent controller is not getting invoked).

I have used $urlRouterProvider to manage each state. I am going back to parent state by using following statement:

$state.go('parent',{}, {reload: true});

Above action is triggering my configuration snippet, and loading new data from server, following is the code snippet in configuration to load parent state:

$stateProvider.state('parent', {
            url                 : '/parent',
            templateUrl         :  'app/parent.html',
            controller          :  'ParentController',
            controllerAs        :  'parentController',
            resolve         : {
                list : function($stateParams, parentServices){
                    return parentServices.getList();
                }

            }
        });

parentServices.getList() this function is getting invoked. I have put break point for the first statement in the parent controller, but its not getting invoked.

While reloading the page its loading fine. Please let me know what's wrong with the current flow, which is blocking from calling controller.

Update : State configruations

$stateProvider.state('parent', {
            url                 : '/parent',
            templateUrl         :  'app/parent-management/parent.html',
            controller          :  'ParentController',
            controllerAs        :  'parentController',
            resolve         : {
                parentList : function($stateParams, keyServices){
                    return parentServices.getList();
                }

            }
        });
        $stateProvider.state('parent.child', {
            url             : '/:action/:id',
            templateUrl     : 'app/parent-management/parent-child.html',
            controller      : 'ParentChildController',
            controllerAs    : 'parentChildController',
            resolve         : {
                currentModelID : function($stateParams){
                    return {
                        id      : $stateParams.id,
                        action  : $stateParams.action
                    }
                }
            }
        });

If I navigate to a child state the child controller will be initialised, if I then navigate back to the parent state, the parent controller will not be re-created.

Thanks.

Answer 1

Place your list of items inside an Angular service you can then use this service to access the data in both your parent and child controllers. Make the service responsible for updating (make sure you update and don't replace) the list with information from the server.

You can then use this information in both your controllers and any manipulation each controller makes on the data will be available to both controllers without the need to re-initialise the controller (which won't happen for the parent controller when using nested states).

Answer 2

Well, the structure is the most important part in Angular apps and router play a vital role in this.

        $stateProvider
            .state("versions-layout", {
                abstract: true,
                url: "/versions/:id",
                templateUrl: "js/versions/versions-layout.html",
                controller: "VersionsController",
                controllerAs: "versionsVm",
                resolve: {
                    version: ["$stateParams", "VersionsService", function ($stateParams, VersionsService) {
                        return VersionsService.getVersionById($stateParams.id);
                    }]
                },
            })
            .state('versions', {
                parent: "versions-layout",
                url: "",
                views: {
                    "version-characteristics": {
                        templateUrl: 'js/versions/version-characteristics/version-characteristics.html',
                        controller: 'VersionCharacteristicsController',
                        controllerAs: 'vm'
                    },
                    "programs": {
                        templateUrl: 'js/versions/programs/programs.html',
                        controller: 'ProgramsController',
                        controllerAs: 'vm',
                        resolve: {
                            programsData: ["version", function (version) {
                                return version.data.programs;
                            }]
                        }
                    }
})

Answer 3

I was able to resolve my problem by doing the following changes in my code:

My child view was inside a modal popup , so to go back to parent view from child view (with reloading of data), the code snippet was written as follows:

$state.go(states.parent,{}, {reload: true});
closeChilUIPopover();// functionality to close the modal popup of child

When I commented out closeChilUIPopover() function, parent view was rendering fine with newly loaded data.

So then I changed order of call as follows:

closeChilUIPopover();
$state.go(states.parent,{}, {reload: true});

But after changing the order of call also had same issue. So I have added the closeChildUIPopover in callback function of $state.go as follows:

$state.go(states.parent,{}, {reload: true}).then(function(){
    closeChilUIPopover();
});

Now everything is working fine. Thanks for all help.