Ionic framework - problem using multiple views inside a single tab view


I’m trying to get a fairly standard UI implemented using Ionic.

I’m familiar with Angular and Ionic. I’ve read this carefully and understood it:
and understood it well.

I’ve just spent two days and can’t find a way to implement the following simple UI. Here are its requirements / specs:

  • there are two tabs: “Explore” and “Library”
  • the “Explore” tab has a search bar in the header, the library does not
  • when the search bar query is not blank, after search is submitted, the explore tab shows some search results below the search bar
  • but when the search bar query is cleared or is empty, the explore tab shows a different content (home page content) below the search bar
  • whatever the Explore tab shows is cached, i.e. if you go to the Library tab and then return to the Explore tab, you see whatever was in the Explore tab before you went to the Library tab

I created a codepen to demonstrate the problem (see below) - the problem is that there are multiple views inside the “Explore” tab: one for the header search bar and one for the content, but the content view never gets rendered/shown.

This is a simple problem with multiple-views. Multiple views and Ionic seems to be extremely difficult/complex to get working…

If anybody could tell me where the problem is with my code, I’d greatly appreciate it!

Some questions:

  • If you enter a search query and submit it, the app does not route to tab.explore.results - why?
  • When routing to tab.explore.home the app does not show the contents of the template: explore-home.html - why?
  • When routing to tab.explore.home the controller ExploreHomeCtrl never gets fired, why? Only the controller for the parent gets fired. Why?

Here is the Codepen:

Looking at console logs (F12 in most browsers) helps see the problem.

Any help would be much appreciated!


Problem fixed – changed the dash character (’-’) to a dot (’.’) in the javascript state declaration of ‘views’ and everything worked.