AngularJS (Ionic Framework) - changing State within controller doesn't seem to be working

Question

What I am trying to do is within the Search controller, once I get the search results back from the server ($http) change view to a different view - the search results view. I am not sure if the approach I am going about it is right, but either-way it doesn't seem to be working. I will need to pass the response as well, so the new view can display the results/response.

My app.js:

.....state('tab.search', {
  url: '/search',
  views: {
      'tab-search': {
          templateUrl: 'templates/tab-search.html',
          controller: 'SearchCtrl as search'
      }
  }
})
.state('tab.search-results', {
  url: '/results',
  views: {
      'tab-search-results': {
          templateUrl: 'templates/tab-search-results.html',
          controller: 'SearchResultsCtrl as searchResults'
      }
  }
})

Then my search controller has:

.controller('SearchCtrl', function($scope, $state, $location, $ionicPopup, service) {
....
 $scope.doSearch = function(state) {
    .....
    var result  = service.doSearch(dataObj);
    result.then(function(response) {
        console.log("I'm here");
        $state.go('tab.search-results');
        ......

My search results view (tab-search-results.html) has the following basic code at the moment:

<ion-view view-title="Search Results">
    <ion-content padding="true">
        hello world
     </ion-content>
</ion-view>

This basic structure is how all my other pages/views are setup too.

What happens when I perform the search is that the console message gets outputted, and then the URL changes to /results as per the tab.search-results state, but the template/view doesn't change/show.

Interestingly if I change $state.go('tab.search-results'); to point to another app state/view that I know works, it works perfectly - but for whatever reason this state/view isn't working.

Also, if there is a better way of achieving this same thing, then please let me know. I will be needing to eventually pass the "response" from SearchCtrl to SearchResultsCtrl - or rather access it on the search results page in one form or another.

Many thanks.

will you please create a sample in plunkr or fiddle i will resolve it because this is html loading issue like you put wrong url or state name — Rana Ahmer Yasin
– Rana Ahmer Yasin, Commented Aug 11, 2015 at 4:30

InfinitePrime · Accepted Answer · 2015-08-11 08:04:26Z

2

I think you are looking for $stateParams.

var result  = service.doSearch(dataObj);
result.then(function(response) {
  $state.go('tab.search-results', {'searchData':response});
}

In your routes file:

.state('tab.search-results', {
  url: '/results/:searchData',
  views: {
      'tab-search-results': {
          templateUrl: 'templates/tab-search-results.html',
          controller: 'SearchResultsCtrl as searchResults'
      }
  }
})

And in your SearchResultsCtrl:

.controller($stateParams) {
  console.log($stateParams.searchData) // will give you search results
}

NOTE:If you don't want to pass data through the URL you can use params key in the .state() method.

.state('tab.search-results', {
  url: '/results',
  params: {
    'searchData':null
  },
  views: {
      'tab-search-results': {
          templateUrl: 'templates/tab-search-results.html',
          controller: 'SearchResultsCtrl as searchResults'
      }
  }
})

answered Aug 11, 2015 at 8:04

InfinitePrime

1,7761 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Over a year ago

Thanks, I think I worked out the problem. It was putting the search results under the tab abstract state. eg: tab.search-results rather than search-results - I am guessing this was the problem as there is no search results tab. When I re-named the state to just search-results (and modified the $state.go to use 'search-results' instead of 'tab.search-results') it worked. Does this seem right?

Martin Over a year ago

Thanks, I'll give this as the answer as it answered part of my question on how to pass data. I realised why my view change wasn't working properly too.

Martin · Accepted Answer · 2015-08-12 23:40:53Z

I realised why my view wasn't changing properly. The fix was changing the views in the sub-view to reference the parent view.

Fail (sub-view has unique name from parent):

.....state('tab.search', {
  url: '/search',
  views: {
      'tab-search': {
          templateUrl: 'templates/tab-search.html',
          controller: 'SearchCtrl as search'
      }
  }
})
.state('tab.search-results', {
  url: '/results',
  views: {
      'tab-search-results': {
          templateUrl: 'templates/tab-search-results.html',
          controller: 'SearchResultsCtrl as searchResults'
      }
  }
})

Success (sub-view references parent, 'tab-search'):

.....state('tab.search', {
  url: '/search',
  views: {
      'tab-search': {
          templateUrl: 'templates/tab-search.html',
          controller: 'SearchCtrl as search'
      }
  }
})
.state('tab.search-results', {
  url: '/results',
  views: {
      'tab-search': {
          templateUrl: 'templates/tab-search-results.html',
          controller: 'SearchResultsCtrl as searchResults'
      }
  }
})

Martin · Accepted Answer · 2015-08-12 01:06:28Z

0

Thanks all, I think I worked out the problem. It was putting the search results page under the tab abstract state. eg: tab.search-results rather than search-results - I am guessing this was the problem as there is no search results tab. When I re-named the state to just search-results (and modified the $state.go to use 'search-results' instead of 'tab.search-results') it worked. Does this seem right?

answered Aug 12, 2015 at 1:06

Martin

7951 gold badge13 silver badges31 bronze badges

Collectives™ on Stack Overflow

AngularJS (Ionic Framework) - changing State within controller doesn't seem to be working

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related