我是离子的新手;我想在两个状态之间传递变量，请指导我如何做到这一点。
我已经设置了codepen example。
我希望在点击项目时（例如item1，item2）移动到查看购物车页面并显示点击项目的ID。
下面附上我的代码：
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>
答案 0 :(得分：0)
简单的方法是使用$ rootScope，但在页面刷新时会一直重置，因为它是一个单页应用程序。
您需要使用持久存在客户端的东西，例如cookie或sessionStorage（因为它们都有到期时间）。对于cookie，请参阅$ cookieStore：https://docs.angularjs.org/api/ngCookies/service/ $ cookieStore
答案 1 :(得分：0)
这个怎么样？
http://codepen.io/anon/pen/YwjEBx
请注意，我在技术上并不是在状态之间传递变量。
您的侧面板和详细信息视图属于同一控制器，因此我只需要在示波器控制器上设置一些变量即可使用。
以下是主要变化：侧面板上有对象的ng-repeat。使用按钮可以绑定ng-click事件。范围中的currentItem包含要在详细信息视图中显示的currentItem的值。我只修改了模板tab1.html和tab1Ctrl。
.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>
答案 2 :(得分：0)
您可以使用$ rootScope在控制器之间共享数据。我经常使用。
答案 3 :(得分：0)
不要滥用$ rootScope在州之间传递信息。它并不意味着那个。 $ rootScope适用于全局应用程序级功能。