Prevent reload of parent view and controller

[georeith]

Given that I am in a child state, and I navigate to the parent state I don't want to reload its view and controller.

This is important for parent states that have a large ng-repeat which gets redrawn each time and can hold up state transition unnecessarily.

[eddiemonge]

It shouldn't reload unless you specify reload: true. How are you going to the parent state? What does your config look like?

[christopherthielen]

yeah ui-router doesn't reload controllers unless the state is reloaded somehow (param changes, etc).

[georeith]

@eddiemonge I don't specify that, here is my state configuration, its pretty verbose unfortunately. It's not the $state.go in the onEnter that never fires unless something goes really wrong. The reloads occur when going from the admin.sc.campaign.item state to itself and when going to admin.sc.campaign.item.details.panel and back from it.

.state('admin.sc.campaign.item', {
            url: '/{item_type:(?:registration|scheduled)}/{item_id:' + objectIdPattern + '}',
            reloadOnSearch: false,
            // Ensure this state can't be entered with a bad callType
            onEnter: ['$state', '$stateParams', 'salesCallService', 'getCallTypes', function($state, $stateParams, salesCallService, callTypes) {
                var paramKey = stateParamFilterData['call_type_id'].param;
                var callTypeId = $stateParams[paramKey];
                var callType = salesCallService.getCallTypeById(callTypeId);
                var reload = false;
                if (callType && callType.name === '1-2-1 Scheduled') {
                    if ($stateParams.item_type !== 'scheduled') {
                        $stateParams[paramKey] = null;
                    }
                } else if ($stateParams.item_type === 'scheduled') {
                    $stateParams[paramKey] = _.result(_.find(callTypes, { name: '1-2-1 Scheduled' }), 'id', null);
                    // For some weird reason the call type doesn't exist.
                    if ($stateParams[paramKey] === null) {
                        $stateParams.item_type = 'registration';
                        reload = true;
                    }
                }

                if (reload === true) {
                    $stateParams.item_id = null;
                    $state.go('admin.sc.campaign.item', $stateParams, {
                        location: 'replace',
                        reload: reload
                    });
                }
            }],
            params: {
                item_type: {
                    value: 'registration',
                    squash: true
                },
                item_id: null,
                info: null
            },
            views: {
                '': {
                    template: '<ui-view/>'
                },
                // Override from above as we now want to pass the lead parameter to this controller
                'registration-list@admin.sc': {
                    templateUrl: function($stateParams) {
                        return ($stateParams.item_type === 'registration') ? '/templates/common/admin/partials/registration_list.html' : '/templates/common/admin/partials/scheduled_call_list.html';
                    },
                    controllerProvider: ['$stateParams', function($stateParams) {
                        return ($stateParams.item_type === 'registration') ? 'scRegistrationListController' : 'scScheduledCallListController';
                    }],
                    controllerAs: 'vm'
                },
                'registration-info-panel@admin.sc': {
                    templateUrl: '/templates/common/admin/partials/registration_info_panel.html',
                    controller: 'scRegistrationInfoController',
                    controllerAs: 'vm'
                }
            }
        })
        .state('admin.sc.campaign.item.detail', {
            abstract: true,
            templateUrl: '/templates/common/admin/partials/detail_overlay.html',
            controller: 'scItemDetailController',
            controllerAs: 'vm'
        })
        .state('admin.sc.campaign.item.detail.panels', {
            url: '/detail',
            reloadOnSearch: false,
            views: {
                'lead-info-panel': {
                    templateUrl: '/templates/common/admin/partials/lead_info_panel.html',
                    controller: 'scLeadInfoController',
                    controllerAs: 'vm'
                },
                'evaluation-panel': {
                    templateUrl: '/templates/common/admin/partials/evaluation_panel.html',
                    controller: 'scEvaluationController',
                    controllerAs: 'vm'
                },
                'registration-info-panel': {
                    templateUrl: '/templates/common/admin/partials/registration_info_panel.html',
                    controller: 'scRegistrationInfoController',
                    controllerAs: 'vm'
                },
                'lesson-info-panel': {
                    templateUrl: '/templates/common/admin/partials/lesson_info_panel.html',
                    controller: 'scLessonInfoController',
                    controllerAs: 'vm'
                },
                'call-info-panel': {
                    templateUrl: '/templates/common/admin/partials/call_info_panel.html',
                    controller: 'scCallInfoController',
                    controllerAs: 'vm'
                },
                'scheduled-call-panel': {
                    templateUrl: '/templates/common/admin/partials/scheduled_call_panel.html',
                    controller: 'scScheduledCallCreateController',
                    controllerAs: 'vm'
                },
                'note-list-panel': {
                    templateUrl: '/templates/common/admin/partials/note_list_panel.html',
                    controller: 'scNoteListController',
                    controllerAs: 'vm'
                },
                'email-list-panel': {
                    templateUrl: '/templates/common/admin/partials/email_list_panel.html',
                    controller: 'scEmailListController',
                    controllerAs: 'vm'
                }
            }
        });

[georeith]

@christopherthielen the param doesn't change when going from child to parent or parent to child.

[georeith]

@christopherthielen the item_id and item_type params from the state admin.sc.campaign.item state in my code sample above aren't being inherited by $state.go causing a transition. Infact they aren't present at all. Causing a change in parameters.

Here is my $state.go: $state.go('admin.sc.campaign.item.detail.panels');

[christopherthielen]

when the child state is entered, are you swapping out the parent ui-view (the one with the expensive ng-repeat) with a named view in the child state?

[georeith]

@christopherthielen Nope... I replace the view in an ancestor state but expect that behaviour when transitioning from and to it (hence why I do it, to get updated $stateParams inside its controller).

You can see my view definitions above for the two states apologies for its verboseness but didn't want to exclude anything that might be relevant. The expensive view is registration-list@admin.sc.

[georeith]

@christopherthielen The issue is with squash parameters... I have two parameters that are being squashed and ui-router isn't recognising the url with just a trailing slash belonging to the state and is renavigating to the state above it which has the same controller.

If I stop the parameter being squashed the reload between the same state stops.

However I still have a reload when exiting the parent state to go to the child, the fromParams and toParams in stateChangeStart are exactly the same. Although I can now transition from the child state to the parent without a reload.

[christopherthielen]

aha, could you recreate that scenario (squash url not recognized) in a plunk?

[georeith]

@christopherthielen Managed to reproduce it in a minimal setup.

Here's the jsbin: https://jsbin.com/zopayunava/4/edit?html,js,output

With default parameter value:

• You can't go from state 1 to state 2 in one move, you have to click state 2 twice.
• You can't go from state 3 to state 2 it redirects to state 1

With non-default parameter you can traverse states as you please. Likewise with squashing of the parameter set to false.

I've purposefully used $state.go and not ui-sref as I imagine there are issues anyway with matching URLs on first load or with ui-sref that have squashed parameters, I have also put a regex rule against the parameter to prevent it from having the same URL as the parent state above it. That works because if you set the parameter to three you can't navigate away from state 1.

[christopherthielen]

Seems to be fixed in 0.2.16+
https://jsbin.com/fotovacewo/edit?html,js,output