Problem with URL & Views

ionic-v1
1

Trying to make a list with each item on the list linking to a new view. Nothing fancy just static content for now. For some reason can only get one menu item to link. Both will link but not at the same time. Here is my relevant code.

app.js

.state('tab.home', { url: '/home', views: { 'tab-home': { templateUrl: 'templates/tab-home.html', controller: 'HomeCtrl' } } }) 
// Sub tabs of home
//===================================
.state('tab.specialoffers', {
      url: '/home/specialoffers',
      views: {
        'tab-home': {
          templateUrl: 'templates/specialoffers.html',
        }
      }
    })

.state('tab.enquiry', {
          url: '/home/enquiry',
          views: {
            'tab-home': {
              templateUrl: 'templates/enquiry.html',
            }
          }
        })
// End of sub tabs of home 
//==============================//

tab-home.html

<ion-list>
  <ion-item type="item-text-wrap" href="#/tab/home/special-offers">
  	<i class="icon ion-fork"></i>
		Special Offers
  </ion-item>

  <ion-item type="item-text-wrap" href="#/tab/home/enquiry">
  	<i class="icon ion-fork"></i>
		Make Enquiry
  </ion-item>

</ion-list>

controller.js

.controller('HomeCtrl', function($scope) { })

Screenshot of Menu

At the moment when I click on Special Offers I see the url refresh and flash with the correct target but it doesn’t change. Also if I type in http://localhost:8000/#/tab/home/specialoffers manually it still will not load.

When I click on Make Enquiry it goes to the correct view, which is http://localhost:8000/#/tab/home/enquiry and the breadcrumb back button works perfectly.

I want to have five items in this list each with their own view.

Any help would be very much appreciated.

2

I think that you routes should look like this:

.state('tabs', {
	url: '/tabs',
	abstract: true,   //NOTE: this is a abstract view that serves as base template
	templateUrl: 'templates/tabs.html'
})
.state('tab.specialoffers', {
      url: '/specialoffers',			// NOTE: you don't need to specify the full url because this state is a child of tabs state
      views: {
        'tab-specialoffers': {
          templateUrl: 'templates/specialoffers.html',
		  controller: ...
        }
      }
    })
.state('tab.enquiry', {
	url: '/enquiry',
	views: {
		'tab-enquiry': {
		  templateUrl: 'templates/enquiry.html',
		  controller: ...
		}
	  }
	});

this is the base template

  <ion-view title="Home">
	<ion-tabs>
	  <ion-tab title="Offers" href="#/tabs/specialoffers">
		<ion-nav-view name="tab-specialoffers"></ion-nav-view>
	  </ion-tab>
	  <ion-tab title="About Tab" href="#/tabs/enquiry">
		<ion-nav-view name="tab-enquiry"></ion-nav-view>
	  </ion-tab>
	</ion-tabs>
  </ion-view>

I wouldn’t recommend you to use nested views with tabs unless you want to suffer :stuck_out_tongue:

If you search in the forum you will find a lot of posts talking about simillar issues

1 Like
3

Thanks! Tried what you had there and changed it around a bit and couldn’t get it to work. How would you approach it without using nested views. Modal’s maybe??

4

Take a look to this codepen I made this to show my back button issues. I recommend to you to use this aproach instead of the tabs navigation style.

5

Thanks! Think I will spend another hour on the tabs approach then try the sidebar approach. Thanks for the codepen’s and help!

6

So this what I used to get it working for I need it for.

Home Page (tab-home.html)

<ion-view title="Home">

<ion-list>
  <ion-item type="item-text-wrap" href="#/tab/home/offer">
  	<i class="icon ion-fork"></i>
		Special Offers
  </ion-item>

  <ion-item type="item-text-wrap" href="#/tab/home/enquiry">
  	<i class="icon ion-fork"></i>
		Make Enquiry
  </ion-item>

  <ion-item type="item-text-wrap" href="#/tab/home/profile">
  	<i class="icon ion-fork"></i>
		Profile
  </ion-item>

</ion-list>

app.js

 // setup an abstract state for the tabs directive
.state('tab', {
  url: "/tab",
  abstract: true,
  templateUrl: "templates/tabs.html"
})

// Each tab has its own nav history stack:

.state('tab.home', {
  url: '/home',
  views: {
    'tab-home': {
      templateUrl: 'templates/tab-home.html',
      controller: 'HomeCtrl'
    }
  }
})


   // Sub Tabs of tab-home.html
   //==============================//
   .state('tab.offer', {
      url: '/home/offer',
      views: {
        'tab-home': {
          templateUrl: 'templates/offer.html',
          controller: 'OfferCtrl'
        }
      }
    })

   .state('tab.enquiry', {
      url: '/home/enquiry',
      views: {
        'tab-home': {
          templateUrl: 'templates/enquiry.html',
          controller: 'EnquiryCtrl'
        }
      }
    })

   .state('tab.profile', {
      url: '/home/profile',
      views: {
        'tab-home': {
          templateUrl: 'templates/profile.html',
          controller: 'ProfileCtrl'
        }
      }
    })
   // End of sub tabs =============//

controllers.js

.controller('HomeCtrl', function($scope) {
})
.controller('OfferCtrl', function($scope) {
})
.controller('EnquiryCtrl', function($scope) {
})
.controller('ProfileCtrl', function($scope) {
})

profile.html

<ion-view title="Profile">
  <ion-content has-header="true" padding="true">
  <h1> Profile </h1>
  </ion-content>
</ion-view>

All that I have left to do to get this working is to change the home button on the tab bar to refresh the app or something similar. At the moment if I go to a different tab and come back to the home tab it is still where I left it.