unable to call $stateProvider, twice to update the view (it is only working for the first time)

Question

I have a search books page, in which when I click the search tab, depending on the search criteria, it will display the results in the adjacent block. But when I click it second time, it is not working!

The relevant html code of the page:

<form action="#" method="post" ng-controller = "OptionsController as oCtrl">

         <select class="selectpicker btn btn-default" name="SearchCriteria" id ="sOptions">
                <option value="1">Title</option>
                <option value="2">Author</option>
         </select>

         <label class="searchbox">
         <span><br></span>
               <textarea id="searchBox" name="searchBox" value="" type="text" autocomplete="on" placeholder="search books"></textarea>
         </label>

         <input type="button" value="Search" id = "bsearch" class="submit button" ui-sref = ".searchResults">                       

        </form>
<div id = "spaceforresults" ui-view = "" autoscroll="false"> </div>

My angular js code for routing

routerApp.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/home');

$stateProvider
.state('books.searchResults', {
    url: '',
    templateUrl: 'html/searchResults.html',
    controller: 'BookController',
});

So, when I click the search button, the results are popped out as expected. Then If I change the options and click the search button again, it is not routing the view (updating the results). Am I doing anything wrong over here?

Removing the action and method didn't resolve the issue. Anyway, I got it and posted the answer — Vamsi, Sep 21 '15 at 12:41

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

Reload

Just set your state reload to be true example below

$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams

Taken from here please give original author props.

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 21 '15 at 10:15

Joe Lloyd

19,471
7
53
81

Can you explain this? – Vamsi Sep 21 '15 at 10:24
Yeah sure, you can use this on a button click. So try it with that first and then move it to everywhere you change state to get every page to refresh. – Joe Lloyd Sep 21 '15 at 10:30
I'm getting an error saying that $stateProvider.go is not a function – Vamsi Sep 21 '15 at 10:30
You're just using `$state.go` though right? and you've injected it into the controller right? – Joe Lloyd Sep 21 '15 at 10:44
I'm loosing the scope of $stateProvider in the controller (I defined it as $stateProvider instead of $state in the beginning) – Vamsi Sep 21 '15 at 10:47
That reloads the complete state – Vamsi Sep 21 '15 at 12:37
$state.reload() does reload the resolves, but doesn't reinitialize the controller with the newly resolved values. Since the whole point of reloading the resolves is to refresh the scope with the new data, reinitializing the controller is a requirement for $state.reload() to be of any use. – Vamsi Sep 21 '15 at 12:43

score 0 · Accepted Answer · edited May 23 '17 at 12:29

I got the answer! By using $state.go in a different state, we can explicitly ask the router to reload the content based on the event triggered.

Then my angularjs code is modified to

routerApp.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/home');

$stateProvider
.state('books.searchResults', {
url: '',
templateUrl: 'html/searchResults.html',
controller: 'BookController',
})

$stateProvider
.state('books.reloader', {
controller: function($state) {
      $state.go('^.searchResults');
    }
});

and in the form,

<input type="button" value="Search" id = "bsearch" class="submit button" ui-sref = ".reloader">

This answer was taken from this post

unable to call $stateProvider, twice to update the view (it is only working for the first time)

2 Answers2

Reload