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 question: I need to add anchor support for my application (anchors to topics).

Here's how far I am:

angular.module('app.topics', [
    'ui.state',
    'ui.router',
    'restangular'
    'app.topics.controllers'
])
.config(function config($stateProvider) {
    $stateProvider.state('viewtopic', {
        url: '/topics/:slug?section',
        onEnter: function($stateParams) {
            // Works, as state has been reloaded.
            console.log('$stateParams', $stateParams);
        },
        resolve: {
            topic: function ($stateParams, Topic) {
                // Wrapper around Restangular. Returns promise.
                return new Topic().get($stateParams.slug);
            }
        },
        views: {
            'main': {
                controller: 'TopicCtrl',
                templateUrl: 'topics/templates/details.tpl.html'
            },
            'sidebar': {
                controller: 'SidebarCtrl',
                templateUrl: 'topics/templates/sidebar.tpl.html'
            }
        }
    });
});

angular.module('app.topics.controllers', [])
    .controller('TopicCtrl', function ($scope, topic, $rootScope, $location,
                                         $anchorScroll, $stateParams) {
        $scope.topic = topic;
        $scope.slug = $stateParams.slug;
        $scope.section = $stateParams.section;
        // ..

        $scope.$watch('$stateParams.section', function (newValue, newValue) {
            // Does not work.
            console.log('stateParams.section changed', newValue, newValue);
        });
    });

My root issue is when I click on link with #/topics/slug-name?section=section-1, state is reloaded completely, which in turn re-requests data for Topic. How can one just "refresh" query parameters (and catch that event in controller) but don't reload state (to keep data loaded)?

EDIT

For my issue there is a rather simple solution which I've failed to notice - per AngularJS documentation on "Hashbang and HTML5 Modes" - last hash is accessible via $location.hash() and scrolling can be initiated by $anchorScroll()

So my current solution is:

In controller:

$scope.$watch('$location.hash', function () {
    _.defer($anchorScroll);
});

Defer is needed because content may not be parsed yet and there are no id's.

In template I just had to set target to #/topics/slug-name#section-name.

There are events emitted by uiRouter. For example there is a '$viewContentLoading' event https://github.com/angular-ui/ui-router/wiki#wiki-view-load-events Have you tried catch it and stop before view rendering happened ? — Igor Malyk, Jan 31 '14 at 12:28
It feels like you have found a solution with `$location.hash()`. What did you expect when you started the bounty? — Khanh TO, Jan 31 '14 at 14:31

Jimmy Kane · Answer 1 · 2017-04-26T12:48:08.307

20

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

edited Apr 26 '17 at 12:48

answered Feb 05 '14 at 09:30

Jimmy Kane

16,223
11
86
117

This is it. Note to ui-router users - `reloadOnSearch: false` has to be put directly in state and is supported in ui-router since 0.2.5. I'm marking doodeecs' answer as correct solution but bounty goes to you, for such great example. – Kristaps Karlsons Feb 07 '14 at 08:15
1

angular-ui-router does not fire $routeUpdate – Andrey Kuznetsov Apr 11 '14 at 08:48
@AndreyKouznetsov `$scope.$emit('$locationChangeSuccess');` does that! – Jimmy Kane Apr 11 '14 at 09:39
@JimmyKane only if angular-route is present though it should not be included when ui-router is used. – Andrey Kuznetsov Apr 11 '14 at 15:14
@AndreyKouznetsov Correct yes. – Jimmy Kane Apr 11 '14 at 15:19
2

$scope.$emit('$locationChangeSuccess') is the key! Very useful. – Vlatko Jul 18 '15 at 01:22
1

Just to add: Without `ngRoute` there will be no `$routeUpdate` event. in this case you need to listen to `$scope.$on('$locationChangeSuccess', ...)` instead – Dmitry Gonchar Apr 26 '17 at 10:02

score 13 · Accepted Answer · answered Feb 05 '14 at 09:19

13

Have you tried reloadOnSearch parameter within routes definition?

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

answered Feb 05 '14 at 09:19

doodeec

2,927
19
23

score 4 · Answer 3 · answered Feb 05 '14 at 15:26

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

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

3 Answers3

Linked