3

After performing a search and navigating away i want the user to be able to return to the search page (by hitting back in the browser) and retain the current search parameters. I've come to realize that in order to do this, the pages url must be updated to contain data about the page. With research i found i can update the location using $location and force the page NOT to reload when a change is made by using reloadOnSearch in the routes. However, for some reason when i change the search parameters (url?...) the page in fact does reload. Any idea of how to fix it to prevent reloading?

routes.coffee:

'use strict'

angular.module('app.rc.routes', ['ui.router'])
  .config ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) ->
    $urlRouterProvider.otherwise '/'
    $stateProvider
      ...
      .state('resource_center.search',
        url: '/resources/search?term'
        templateUrl: 'views/rc/search.html'
        controller: 'SearchCtrl'
        reloadOnSearch: false
      )
      ...
  ]

search.coffee:

'use strict'
angular.module('app.rc.controllers').controller 'SearchCtrl', ['$scope', '$state', '$http', '$stateParams', '$location', ($scope, $state, $http, $stateParams, $location) ->
  $scope.term = $stateParams.term || ''
  $scope.updateResults =  ->
    console.log "Loading Results"
    ...
    $location.search({term: $scope.term})

References:

As a reference to how to properly do this, I was using: https://stackoverflow.com/a/12481175/1382588

Community
  • 1
  • 1
Michael Lynch
  • 1,743
  • 15
  • 27

1 Answers1

2

reloadOnSearch isn't currently supported by ui-router

https://github.com/angular-ui/ui-router/issues/367

You should be able to do what you want to do in ui-router by having two states: a search page state, and a search results child state.

search will be at /search for example, and search results at /search/{query}. The search page will have a view to display the search box, and a nested view to display the search results. The search button will do a state change to the search results state. The will cause the search results nested view to update, without changing the appearance of the search page.

Dan
  • 3,229
  • 2
  • 21
  • 34
  • This will still cause the page to reload, causing all variables currently set on $scope to reset (unless passed in via {query}). It seems to be rather inefficient to process a page change and then parse out all of the $stateParams. I suppose its a working solution, but i'd hope there be a more efficient way of doing it. – Michael Lynch Oct 28 '13 at 15:39
  • 1
    I'm not 100% sure but I think the router is intelligent enough to only reload the necessary parts - see http://angular-ui.github.io/ui-router/sample/#/contacts/1/item/a. If you're just switching the nested view the page shouldn't reload. I'd suggest that you would want to handle that situation anyway, so that your users can share search results page urls with each other. – Dan Oct 28 '13 at 17:11