AngularJS $stateParams when using reloadOnSearch:false

Question

I have a page in my application which uses a search so i have added the "realoadOnSearch:false" which works perfectly

The problem I have is when navigating to the same state with a different stateParam:

when I navigate to #/category/20/ from any other page it works fine... i then have a link on that page to #/category/3 (the parent category for 20) and the URL updates, however the content does not (no console errors)

app.js (main application)

        .state('category', {
            url: '/category/:categoryId/',
            templateUrl: '/Home/Category',
            controller: 'categoryCtrl',
            reloadOnSearch: false
        })

I have tried adding target="_self" to force page reload and it does not work

I have also tried to watch $stateParams for changes and there is nothing

Clicking the link to #/category/3 from #/category/20 (and vice versa) should navigate to the new page and reload the data, where search should NOT reload the page (latter works but not the former)

The URL is prefered to be a ng-href rather than ng-click as it is managed by the root controller

EDIT:

I did not find a direct solution, however i just disabled the reloadOnSearch and my sorting buttons still work so this works for me for now as a solution.

Do the $stateChangeStart and $stateChangeSuccess events fire? — NevilleS
I tried listening to both events from $rootScope on run and no events are fired =/ @NevilleS — LOGMD

NevilleS NevilleS · Accepted Answer · 2014-10-27T13:33:33

The problem is that reloadOnSearch doesn't do what you think it does; it's actually more like reloadOnStateParams. Setting it to false prevents you from making state changes where only the stateParams change, which is what you're doing here (going from #/category/3 to #/category/20).

You can see this documented on the UI router issues page: https://github.com/angular-ui/ui-router/issues/1079

There's some workarounds in there but none of them are great. You are probably best off using an ng-click that forces a reload manually, something like this:

$state.transitionTo($state.current, $stateParams, {
  reload: true,
  inherit: false,
  notify: true
});

AngularJS $stateParams when using reloadOnSearch:false

1 Answers