Suppress reloading of ui-router based view on query parameter change

Question

Updated question

Question in title still stands - is it possible to catch ?parameters and cancel view reload.

Original

Answer 1

This can be achieved by using nested states. the code will look something like this

 $stateProvider.state('viewtopic', {abstract:true,
url:/topics,
resolve: {
            topic: function ($stateParams, Topic) {
                // Wrapper around Restangular. Returns promise.
                return new Topic().get($stateParams.slug);
            }
        },
views: {
templateUrl:<template>
}
});

$stateProvider.state('viewtopic.impl', {abstract:true,
        url: '/:slug?section',
        onEnter: function($stateParams) {
            // Works, as state has been reloaded.
            console.log('$stateParams', $stateParams);
        },

        views: {
            'main': {
                controller: 'TopicCtrl',
                templateUrl: 'topics/templates/details.tpl.html'
            },
            'sidebar': {
                controller: 'SidebarCtrl',
                templateUrl: 'topics/templates/sidebar.tpl.html'
            }
        }

for more read ->https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

Answer 2

My two cents

First check @doodeec answer about setting up reloadOnSearch to false:

{
    route:'/',
    resolve: {
        templateUrl:'template.html',
        reloadOnSearch: false
    }
},

Then on the controller you want to catch this:

/* Setup to detect when there is a change in the search */
$scope.$on('$routeUpdate', function(next, current) {
   // Do something when routeupdate is called. 
});

I case you want to change the search:

$location.search({'slide_id': slide_id})

Also take care for a small Gotcha:

If your route params do not change (or change to the same value) since reload is disabled then you might need to force the location change:

$scope.$emit('$locationChangeSuccess');

From comments:

Without ngRoute there will be no $routeUpdate event. in this case you need to listen to $scope.$on('$locationChangeSuccess', ...) instead

Answer 3

Have you tried reloadOnSearch parameter within routes definition?

{
    route:'/',
    resolve: {
        templateUrl:'template.html',
        reloadOnSearch: false
    }
},