stackoom
  简体   繁体   中英

How to pass variable between states?

 原文  2016-02-02 10:21:19  6   4    javascript/ jquery/ angularjs/ ionic-framework

Question

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>

4 answers

solution1
 0  2016-02-02 10:26:39

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

solution2
 0  2016-02-02 10:40:26

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>

solution3
 0  2016-02-02 13:31:27

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

See here a good example

solution4
 0  2016-02-02 15:49:10

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to pass states between function components in React How to pass $state variable into 2 other sibling $states? Pass States between Components - ReactJS How can I pass multiple states between views in ReactJS? How to maintain JavaScript function variable states (values) between calls? How to animate an image between states How can I pass data between states with angular ui-router? how to pass variable between to vue file? How to pass a variable between pages WinJS? How to pass data through states in AngularJs?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM