Within my Ionic application, there is a need to pass parameter(s) from one sub-view to another. Initially, the parameters are successfully passed as expected. However, upon returning to the first sub-view and then navigating to another sub-view, the parameters seem to get lost. Here is the relevant code:
index.html (project/www)
<!DOCTYPE html>
<html>
<head>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/main.js"></script>
<script src="js/routes.js"></script>
</head>
<body ng-app="app" animation="slide-left-right-ios7" >
<!-- main window -->
<div>
<ion-nav-view></ion-nav-view>
</div>
</body>
</html>
route.js (www/js/route.js)
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('mainUser', { // initial view
url: '/mainuser',
templateUrl: 'templates/mainUser.html',
controller: 'mainCtrl'
})
.state('userDrive', { // destination view
url: '/user_drive',
params: {
driveData: null // passing parameter
},
templateUrl: 'templates/user_drive.html',
controller: 'DriveCtrl'
});
$urlRouterProvider.otherwise('/mainUser');
});
templates/mainUser.html
<ion-side-menus>
<ion-side-menu-content>
<ion-content class="padding" style="background-color:#fff;">
<input type="date" ng-model="selectData.selectedDate" placeholder="Date">
<input type="time" ng-model="selectData.selectedTime" placeholder="Time">
</ion-content>
<div class="bar bar-footer">
<div class="button-bar">
<a ui-sref="userDrive({ driveData: selectData })" class="button"> Drive </a>
</div>
</div>
</ion-side-menu-content>
</ion-side-menus>
Upon clicking the Drive button, the user gets redirected to the userDrive sub-view with the driveData parameter intact. However, when I navigate back to mainUser, make changes in the input fields, and try clicking on Drive again, the redirection to userDrive happens without the driveData parameter being passed.
userDrive Controller
.controller('DriveCtrl', function($scope, $state, $stateParams) {
console.log("DriveCtrl"); // after redirecting to this controller for the second time
// it seems that no values are passed
// possibly indicating that DriveCtrl is not being called
console.log("$stateParams : ", $stateParams);
})