简体   繁体   中英

angular.js ui-router pass no data

In my Ionic app , I want to pass parameter(s) from one sub-view to another sub-view. When I pass parameters first time, It works as I expected, but my problem is, when I return first sub-view and then go to another sub-view, it goes to that page without parameters. My code is given below:

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', {   // first window
           url: '/mainuser',
           templateUrl: 'templates/mainUser.html',
           controller: 'mainCtrl'
        })
       .state('userDrive', {  // second window
          url: '/user_drive',
          params: {
             driveData: null  // parameter send
          },
          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>

Here after click on Drive button, it will redirect to userDrive sub-view with parameter driveData correctly. But where I back to mainUser and then change selectData.selectedDate and selectData.selectedTime and then click again on Drive button, it will redirect to userDrive sub-view without driveData parameter.

userDrive Controller

.controller('DriveCtrl', function($scope, $state, $stateParams) {       
     console.log("DriveCtrl");  // after redirect to this controller second time
                                // it also print no value
                                // seems might be DriveCtrl is not called
     console.log("$stateParams :  ", $stateParams);       
})

The problem is that the view is cached by Ionic, and in that case the controller gets executed only once, so that's why you only see the log the first time.

You need to use ionic view events, here the docs: http://ionicframework.com/docs/api/directive/ionView/

如果您需要单独发送每个值,则无法将对象发送到状态参数

@leandro-zubrezki is right. To remove cache you can add anywhere in the controller 'DriveCtrl'.

$scope.$on("$ionicView.afterLeave", function () {
    $ionicHistory.clearCache();
});

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM