0

I'm new to ionic; I want to pass variables between two states, please guide me on how to do it.

I have setup a codepen example.

I want when items are left clicked (say item1, item2) move to view cart page and show id of clicked item.

Below is attached my code:

angular.module('ionicApp.controllers', [])
.controller('Tab1Ctrl', function($scope){

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

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

});
.btn-footer .button { margin: 0; }
.btn-footer .row { padding: 0; }
.btn-footer .col { padding: 0 5px; }
.img-box img { max-width: 100%; }
.p0 { padding: 0; }
.tabs-top-my .tab-nav.tabs { top: 0; }
.my-content-tabs > .row { height: 100%; }
.my-content-tabs .col-25,.my-content-tabs .col-20 { position:relative;}
.img-box {
    height: 100%;
    max-height: 100%;
    position: absolute;
    left: 0;
}
#maincontainer > div.scroll{padding-left:10px;}

.my-imgs-scroll { height: 100%; overflow:hidden !important; overflow-y:scroll !important; }
ion-scroll > div.scroll > img{ border-bottom:1px solid #eee;}
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic page</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//fabricjs.com/lib/fabric_with_gestures.js"></script>
  
  
   
</head>

<body ng-controller="HomeTabCtrl">


<ion-side-menus>
  <ion-side-menu-content>
  <ion-nav-view animation="slide-left-right"> </ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="right">
   <div class="list">
   <a class="item item-icon-left" href="#"><i class="icon ion-email"></i> Check mail</a>
   <a class="item item-icon-left" href="#"> <i class="icon ion-chatbubble-working"></i>Call Ma</a> 
   <a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album</a> 
   <a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Friends</a>
   </div>
  </ion-side-menu>
</ion-side-menus>  


<script id="templates/tabs.html" type="text/ng-template">
      <ion-tabs class="tabs-striped tabs-positive tabs-top tabs-top-my tabs-icon-only" animation="fade-in-out">

        <ion-tab title="tab1" icon="ion-home" href="#/tab/tab1">
          <ion-nav-view name="tab1-tab"></ion-nav-view>
        </ion-tab>
        <ion-tab title="tab2" icon="ion-home" href="#/tab/tab2">
          <ion-nav-view name="tab2-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="tab3" icon="ion-home" ui-sref="tabs.tab3">
          <ion-nav-view name="tab3-tab"></ion-nav-view>
        </ion-tab>
  <ion-tab title="tab4" icon="ion-home" ui-sref="tabs.tab4">
          <ion-nav-view name="tab4-tab"></ion-nav-view>
        </ion-tab>
  <ion-tab title="tab5" icon="ion-home" ui-sref="tabs.tab5">
          <ion-nav-view name="tab5-tab"></ion-nav-view>
        </ion-tab>
  <ion-tab title="tab6" icon="ion-android-apps" ng-click="toggleRightSideMenu()"  ui-sref="tabs.tab6">
         <ion-nav-view name="tab6-tab"></ion-nav-view>

        </ion-tab>

      </ion-tabs>
  <ion-footer-bar  class="bar-footer btn-footer bar-light">
  <div class="row">
    <div class="col">
      <button class="button  button-block button-positive" ng-click='next()'> View cart Page </button>
    </div>
    <div class="col">
      <button class="button  button-block button-calm"> View checkout page </button>
    </div>
  </div>
</ion-footer-bar>
    </script> 
<script id="templates/tab1.html" type="text/ng-template">
      <ion-view view-title="tab1">
  <div class="my-content-tabs scroll-content ionic-scroll  has-header has-footer has-tabs-mytop">
   <div class="row p0">
    <div class="col col-25 p0">
      <div class="img-box">
     <ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer">
            <div  id="1" style="height=:40px"> Item 1</div>
            <hr/>
            <div  id="2" style="height=:40px"> Item 2</div>
             <hr/>
             <div  id="3" style="height=:40px"> Item 3</div>
            
     </ion-scroll>
      </div>
    </div>
    <div class="col col-50" id="canvascontainer">
          tab 1
    </div>
    <div class="col col-25 p0">
      <div class="img-box">
     <ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer1">

     </ion-scroll>
      </div>
    </div>
   </div>
  </div>

      </ion-view>
</script> 

<script id="templates/tab2.html" type="text/ng-template">
    <ion-view view-title="tab2">
      <div class="my-content-tabs scroll-content ionic-scroll  has-header has-footer has-tabs-mytop">
          <div class="row p0">
   <div class="col col-25 p0">
     <div class="img-box">
    <ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer">
    </ion-scroll>
     </div>
   </div>
   <div class="col col-50" id="canvascontainer">
          tab 2
   </div>
   <div class="col col-25 p0">
     <div class="img-box">
    <ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer1">
    </ion-scroll>
     </div>
   </div>
  </div>
  </div>

    </ion-view>
</script> 
<script id="templates/tab3.html" type="text/ng-template">
      <ion-view view-title="tab3">
       <div class="my-content-tabs scroll-content ionic-scroll  has-header has-footer has-tabs-mytop">
   <div class="row p0">
   <div class="col col-25 p0">
     <div class="img-box">
     </div>
   </div>
   <div class="col col-50">       <canvas id="canvas3"></canvas> </div>
   <div class="col col-25 p0">
     <div class="img-box">
     </div>
   </div>
   </div>
  </div>
      </ion-view>
</script> 
<script id="templates/tab4.html" type="text/ng-template">
      <ion-view view-title="tab4">
       <div class="my-content-tabs scroll-content ionic-scroll  has-header has-footer has-tabs-mytop">
   <div class="row p0">
   <div class="col col-25 p0">
     <div class="img-box">
     </div>
   </div>
   <div class="col col-50"> Coming Soon   </div>
   <div class="col col-25 p0">
     <div class="img-box">
     </div>
   </div>
   </div>
  </div>
      </ion-view>
</script> 
<script id="templates/tab5.html" type="text/ng-template">
      <ion-view view-title="tab5">
       <div class="my-content-tabs scroll-content ionic-scroll  has-header has-footer has-tabs-mytop">
   <div class="row p0">
   <div class="col col-25 p0">
   <div class="img-box">
   </div>
   </div>
   <div class="col col-50"> Coming Soon   </div>
   <div class="col col-25 p0">
   <div class="img-box">
   </div>
   </div>
   </div>
  </div>
      </ion-view>
</script> 
<script id="templates/tab6.html" type="text/ng-template">
      <ion-view view-title="tab6">
       <div class="my-content-tabs scroll-content ionic-scroll  has-header has-footer has-tabs-mytop">
        <div class="row p0">
  <div class="col col-25 p0">
  <div class="img-box">
  </div>
  </div>
  <div class="col col-50"> Coming Soon   </div>
  <div class="col col-25 p0">
  <div class="img-box">
  </div>
  </div>
  </div>
  </div>
      </ion-view>
</script> 
<script id="templates/nav-stack.html" type="text/ng-template">
      <ion-view view-title="Tab Nav Stack">
        <ion-content class="padding">
          <p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
        </ion-content>
      </ion-view>
    </script> 
  <script id="templates/next.html" type="text/ng-template">


    <ion-view view-title="View Cart" nav-bar-class="bar-balanced">
 <ion-nav-bar class="bar-positive" align-title="center">
  <ion-nav-back-button>
  </ion-nav-back-button>
 </ion-nav-bar>
 <ion-content class="padding">
  
    clicked id :
   <p>
  <a class="button icon ion-home" href="#/tab/home"> Home</a>
  <a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
   </p>
 </ion-content>
</ion-view>
    
</script> 
<script>
angular.module('ionicApp', ['ionic', 'ionicApp.controllers', 'ngAnimate']).config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.tab1', {
      url: "/tab1",
      views: {
        'tab1-tab': {
          templateUrl: "templates/tab1.html",
          controller: 'Tab1Ctrl'
        }
      }
    })
    .state('tabs.tab2', {
      url: "/tab2",
      views: {
        'tab2-tab': {
          templateUrl: "templates/tab2.html",
  controller: 'Tab2Ctrl'
        }
      }
    })
    .state('tabs.tab3', {
      url: "/tab3",
      views: {
        'tab3-tab': {
          templateUrl: "templates/tab3.html",
          controller:'Tab3Ctrl'
        }
      }
    })
    .state('tabs.tab4', {
      url: "/tab4",
      views: {
        'tab4-tab': {
          templateUrl: "templates/tab4.html"
        }
      }
    })
    .state('tabs.tab5', {
      url: "/tab5",
      views: {
        'tab5-tab': {
          templateUrl: "templates/tab5.html"
        }
      }
    })
  .state('next', {
      url: "/next",
      templateUrl: "templates/next.html",
      controller: "NextController",
  params: {
   clickedid: null
  }
    })
   $urlRouterProvider.otherwise("/tab/tab1");

})
.controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate, $state) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
  $scope.toggleRightSideMenu = function() {
   console.log('rigth open')
    $ionicSideMenuDelegate.toggleRight();
  };
  console.log('HomeTabCtrl');
  $scope.next = function(){
    $state.transitionTo('next');   
  }
}).controller("NextController", function($scope){
    $scope.showAlert = function(){ alert("I'm a modal window!") }
});
</script>
</body>
</html>
k0pernikus
  • 60,309
  • 67
  • 216
  • 347
saurav
  • 487
  • 1
  • 7
  • 21

4 Answers4

0

The simple way is to use $rootScope but will always reset when the page refreshes, since it's a single-page app.

You need to use something that persists client-side, such as a cookie or sessionStorage (as they both have an expiration time). For the cookies see $cookieStore: https://docs.angularjs.org/api/ngCookies/service/$cookieStore

aitnasser
  • 1,216
  • 1
  • 9
  • 23
0

How about this ?

http://codepen.io/anon/pen/YwjEBx

Note that i'm not technically passing variable between states.

Your sidepanel and details view belong to the same controller so I just have to set some variable on the scope controller to play with.

Here's the main change : an ng-repeat with objects on the side panel. Use of a button to be able to bind an ng-click event. A currentItem in the scope that hold the value of the currentItem to be shown in the details view. I only modified the template tab1.html and the tab1Ctrl nothing more.

.controller('Tab1Ctrl', function($scope){
   $scope.items = [{label:'Item 1', details:'details 1'},{label:'Item 2',details:'details 2'}]
   $scope.currentItem=null;
   $scope.setCurrentItem = function(item){
     $scope.currentItem = item;
   } 
})

<div ng-repeat="item in items">
     <button id="$index" style="height=:40px" ng-click="setCurrentItem(item)">{{item.label}}</button><hr/>
</div>
koox00
  • 2,691
  • 2
  • 15
  • 25
Walfrat
  • 5,363
  • 1
  • 16
  • 35
0

You can work with $rootScope to sharing data between controllers. I use a lot.

See here a good example

Community
  • 1
  • 1
AdsHan
  • 465
  • 4
  • 14
0

Don't abuse the $rootScope to pass things between states. It's not meant for that. $rootScope is meant for global application level functionality.

Please read this solution: watched scope is empty after route change

Community
  • 1
  • 1
com2ghz
  • 2,706
  • 3
  • 16
  • 27