How do pass parameter on Tabs

snailred · June 18, 2014, 9:39am

Hi all,

I have problem when switch tabs, please help me:

    .state('profile', {
            url: "/profile",
            abstract: true,
            templateUrl: "app/profile/views/profile.html",
        })
        .state('profile.intro', {
            url: '/intro/:username',
            views: {
                'profile-intro': {
                    templateUrl: 'app/profile/views/profile-intro.html',
                    controller: 'ProfileIntroCtrl'
                }
            }
        })
.state('profile.more', {
            url: '/more/:username',
            views: {
                'profile-more': {
                    templateUrl: 'app/profile/views/profile-more.html',
                    controller: 'ProfileMoreCtrl'
                }
            }
        })
        .state('profile.feed', {
            url: '/feed/:username',
            views: {
                'profile-more': {
                    templateUrl: 'app/profile/views/profile-feed.html',
                    controller: 'ProfileFeedCtrl'
                }
            }
        });

Html:

<ion-tabs class="tabs-positive tabs-icon-top">
<!-- Store intro -->
<ion-tab title="About" icon-on="icon ion-ios7-person" icon-off="icon ion-ios7-person-outline" href="#/profile/intro">
    <ion-nav-view name="profile-intro"></ion-nav-view>
</ion-tab>
<ion-tab title="Feed" icon-on="icon ion-ios7-camera" icon-off="icon ion-ios7-camera-outline" href="#/profile/feed/">
    <ion-nav-view name="profile-feed"></ion-nav-view>
</ion-tab>
<!-- Adopt Tab -->
<ion-tab title="More" icon-on="ion-ios7-musical-notes" icon-off="ion-ios7-musical-notes" href="#/profile/more/">
    <ion-nav-view name="profile-more"></ion-nav-view>
</ion-tab>

Controller:

 app.controller('ProfileIntroCtrl', function ($scope, $stateParams) {	
    if ($stateParams.username != null && $stateParams.username != undefined) {}
});

app.controller('ProfileFeedCtrl', function ($scope, $stateParams) {	
    if ($stateParams.username != null && $stateParams.username != undefined) {}
});

app.controller('ProfileMoreCtrl', function ($scope, $stateParams) {	
    if ($stateParams.username != null && $stateParams.username != undefined) {}
});

How i can pass parameter when switch tabs,

Same:

Profile: abc.com#/profile/intro/billgate
Feed: abc.com#/profile/feed/billgate
More: abc.com#/profile/more/billgate

Thank you so much!

mhartington · June 18, 2014, 1:29pm

To pass any data between views/controllers, you need to set up a factory, similar to our starter projects.

github.com

ionic-team/ionic-starter-tabs/blob/master/js/services.js

angular.module('starter.services', [])

.factory('Chats', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'img/ben.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'img/max.png'
  }, {
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',

This file has been truncated. show original

snailred · June 19, 2014, 3:29am

Thank you for reply,

But my problem do not same “ionic-startter-tabs”

When go to a profile screen, default About tab selected. I have a route: #/profile/about/mhartington

Now, i want when click “Feed Tab”: Url is #/profile/feed/mhartington

Thank you!

aaronksaunders · June 19, 2014, 4:19am

One way you can do it if you dont want to create the service, but i think you should!! you can set the ng-click to hande clicing on the tab and then set the stateParameter programatically

<!-- Adopt Tab -->
<ion-tab title="More"
      icon-on="ion-ios7-musical-notes" 
      icon-off="ion-ios7-musical-notes" 
      ng-click="tabClicked($event)">
<ion-nav-view name="profile-more"></ion-nav-view>
</ion-tab>

in your controller

$scope.tabClicked = function($event) {
    //"#/profile/more/"
    $event.preventDefault();
    $state.transitionTo('profile.more', {
       data: "mhartington"
    });
}

in your state configuration, you are setting the stateParameter as the data field on the url

.state('profile.more', {
    url: '/profile/more/:data',
    views: {
        'profile-more': {
        }
    }
})

snailred · June 19, 2014, 7:55am

Hi @aaronksaunders

this function was wrore which controller?
because: <ion-tabs> outsite controller, it don’t understand tabClicked()

<ion-tab title="More"
      icon-on="ion-ios7-musical-notes" 
      icon-off="ion-ios7-musical-notes" 
      ng-click="tabClicked($event)">
<ion-nav-view name="profile-more"></ion-nav-view>
</ion-tab>

benholz · July 24, 2014, 9:45pm

I’m a newbie in Ionic (and Angular) and struggled with this issue. I think what snailred is asking about is how you pass in a parameter so that the tabs use the parameter in their navigation. For experienced Angular coders, this might be obvious but I personally struggled with this. This is what I finally figured out, which seems to work great. If it’s wrong or should be done in a different way, I would love to get some feedback.
The key is to attach a controller to the abstract state and assign the parameter to the scope. Note that I only have one controller attached to the abstract tab view which assigns url_id to the scope. I posted this on codepen but for your reference, here is the simple script:

angular.module('ionicApp', ['ionic'])

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

    $stateProvider
      .state('landing', {
        url: "/",
        templateUrl: "landing.html"
      })
      .state('tabs', {
        url: "/tab/:id",
        abstract: true,
        templateUrl: "tabs.html",
        controller: 'TabCtrl'
      })
      .state('tabs.home', {
        url: "/home",
        views: {
          'home-tab': {
            templateUrl: "home.html",
          }
        }
      })
      .state('tabs.about', {
        url: "/about",
        views: {
          'about-tab': {
            templateUrl: "about.html"
          }
        }
      });
     $urlRouterProvider.otherwise("/");

  })

  .controller('TabCtrl', function($scope, $stateParams) {
    $scope.url_id = $stateParams.id;
  })

And here is the basic html file:

<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
</ion-nav-bar>
         
<ion-nav-view></ion-nav-view>

<script id="tabs.html" type="text/ng-template">
  <ion-tabs class="tabs-icon-top tabs-positive">
    <ion-tab title="Home" icon="ion-home" href="#/tab/{{url_id}}/home">
      <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>
    <ion-tab title="About" icon="ion-ios7-information" href="#/tab/{{url_id}}/about">
      <ion-nav-view name="about-tab"></ion-nav-view>
    </ion-tab>
  </ion-tabs>
</script>

<script id="landing.html" type="text/ng-template">
  <ion-view title="Landing">
    <ion-content class="padding">
        <h2>Landing Page</h2>
        <input ng-model="urlId" placeholder="enter in an id">
        <a ui-sref="tabs.home({ id: urlId })">go to tabbed view</a>
    </ion-content>
  </ion-view>
</script>

<script id="home.html" type="text/ng-template">
  <ion-view title="Home">
    <ion-nav-buttons side="left">
      <a class="button button-icon icon ion-ios7-arrow-back" href="/#/landing">Landing</a>
    </ion-nav-buttons>      
    <ion-content class="padding">
      <h2>Home Page</h2>
      <p>Notice that the id in the URL is {{ url_id }}. Click the <b>about</b> tab to see this preserved!</p>
    </ion-content>
  </ion-view>
</script>

<script id="about.html" type="text/ng-template">
  <ion-view title="About">
    <ion-content class="padding">
      <h2>About Page</h2>
      <p>Notice that there are no controllers for either the about or home view! I only have a controller 
      for the abstract tab view where I assign the $stateParams url id ($stateParams.id) to the scope ($scope.url_id) and since the <b>home</b> and <b>about</b> views are SUBviews, they inherit that scope variable.  
    </ion-content>
  </ion-view>
</script>

Hope that helps and if anyone has any comments, please let me know!

PS - For some reason my demo on CodePen opens a new tab when I click links. The CodePen demos I saw from Ionic didn’t do this and I couldn’t figure out why. Does anyone have an answer?

Russ_T · January 8, 2015, 12:25am

Hello,

I’m passing parameters ok between tabs, using a factory like

angular.module('myApp.services', [])
.factory('myService', function () {
return {
    data: {
        id: '',
        name: ''
    }
    // Other methods or objects can go here
};
});

My first tab has a list and when you click on an item it fires a state.go and takes you to the second tab.

he first time the second tab is rendered it sets the id and name ok, and I render some css background images based on their value. The next time a selection from the first time is made, the controller isn’t triggered and the view doesn’t refresh.

How can I force this please? I have tried half a dozen different ways and none have been that successful.

Thank you

Russ_T · January 8, 2015, 12:39am

Oh, I found the answer right away, sorry.

http://ionicframework.com/docs/api/directive/ionNavView/

specifically I used

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

penafiel_sebastian · August 10, 2015, 10:51pm

the cache false works, when you are going into a level 3 deep nested state (Thanks I’ve been having a headache with this)
this forces the OID to reset everytime the tabs abstract state is accessed, without this the ID would be the same everytime, (this is what cause my headache).

ui-sref="tabs-organisations.info({OID: id})"

and then you can just call any tab state with ui-sref

ui-sref="tabs-organisations.info"
ui-sref="tabs-organisations.addresses"

.state('organisations.home', {
            url: '/home',
            views: {
                'entitiesContent': {
                    templateUrl: 'templates/organisations/organisations.html',
                    controller: 'OrganisationsCtrl'
                }
            }
        })
        .state('tabs-organisations', {
            cache: false,
            abstract: true,
            parent: 'organisations',
            url: '/tab/:OID',
            views: {
                'entitiesContent': {
                    templateUrl: 'templates/tabs.html',
                    controller: function ($scope, $log, $stateParams, OFactory) {
                        $log.log($stateParams.OID);
                        $scope.entityID = $stateParams.OID;
                    }
                }
            }
        })
        .state('tabs-organisations.info', {
            url: '/info',
            views: {
                'tab-info': {
                    templateUrl: 'templates/organisations/info.html',
                    controller: 'OrganisationInfoCtrl'
                }
            }
        })

onigetoc · March 9, 2016, 6:31am

In the exemple, i tryed to modify it with my own id but it do not accept ID who are not 0,1,2,3,4 ect in order. what i’m doing wrong?