Question

我正在使用Ionic Framework构建一个基本的测验应用程序，但我正在努力在控制器之间传递参数。我需要使用$ scope和$ stateParams来执行此操作。任何帮助，将不胜感激！下面是我的app.js，controllers.js和Q2.html，这是我项目中的一个HTML文件。

＆＃13;

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        params: {
          'Q1Answer': null,
          'Q2Answer': null
        },
        templateUrl: 'templates/startPage.html',
        controller: 'StartCtrl'
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          params: {
            'Q1Answer': null,
            'Q2Answer': null
          },
          templateUrl: 'templates/Q1.html',
          controller: 'Q1Ctrl'
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/result',
      views: {
        'tab-chats': {
          params: {
          'Q1Answer': null,
          'Q2Answer': null,
          'total' : null
        },
          templateUrl: 'templates/result.html',
          controller: 'ResultCtrl'
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        params: {
          'Q1Answer': null,
          'Q2Answer': null
        },
        templateUrl: 'templates/Q2.html',
        controller: 'Q2Ctrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/startPage');

});

＆＃13;

angular.module('starter.controllers', [])

.controller('StartCtrl', function($scope, $state, $stateParams) {

  $scope.onStart = function() {
    $state.go('tab.chats', {
      'Q1Answer' : $scope.Q1Answer,
      'Q2Answer' : $scope.Q2Answer
    })
  };
})

.controller('Q1Ctrl', function($scope, Chats, $state, $stateParams) {

  $scope.Q1Answer = $stateParams.Q1Answer;
  $scope.Q2Answer = $stateParams.Q2Answer;

  $scope.Walter = function(answer) {
    $state.go('tab.account', {
      'Q1Answer' : $scope.answer,
      'Q2Answer' : $stateParams.Q2Answer
    })
  }
})

.controller('ResultCtrl', function($scope, $state, $stateParams, Chats) {

  $scope.Q1Answer = $stateParams.Q1Answer;
  $scope.Q2Answer = $stateParams.Q2Answer;

  if($scope.Q1Answer == "cat" && $scope.Q2Answer == "1") {
     $scope.total = 2;
  }
  else if ($scope.Q1Answer == "cat" || $scope.Q2Answer == "1") {
    $scope.total = 1;
  }
  else {
    $scope.total = 0;
  }

  $scope.done = function() {
    $state.go('tab.dash', {
      'Q1Answer' : "",
      'Q2Answer' : ""
    })
  }
})

.controller('Q2Ctrl', function($scope, $state, $stateParams) {
  $scope.catCount = function(number) {
    $state.go('tab.chat-detail', {
      'Q1Answer' : $stateParams.Q1Answer,
      'Q2Answer' : $scope.number
    })

  }
 });

＆＃13;

<ion-view view-title="Text Question">
  <ion-content>
    <div>
      <h2>How many cats were in the last photo?</h2>
    </div>
    {{Q1Answer}}
    {{Q2Answer}}
    <div class="bottom">
      <div style="float: left; width: 50%;">
        <label class="item item-input">
          <input type="text" name="number" id="number-textarea"
                 ng-model="$parent.number" placeholder="Enter Your Answer">
        </label>
      </div>
    </div>
    <button class = "button button-full" ng-click = "catCount(number)">Submit</button>
  </ion-content>
</ion-view>

＆＃13;

Answer 1

试试这个

路线

.state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        params: {
          'AnswerData': null
        },
        templateUrl: 'templates/startPage.html',
        controller: 'StartCtrl'
      }
    }
  })

控制器：

$scope.Walter = function(answer) {
    var AnswerData = {
      'Q1Answer' : 'data1',
      'Q2Answer' : 'data2'        
    }
    $state.go('tab.account',AnswerData);
  }

在其他控制器中

$scope.AnswerData = $stateParams.AnswerData;
 //i.e. $stateParams.AnswerData = {
     // 'Q1Answer' : 'data1',
     // 'Q2Answer' : 'data2'        
   // }

Answer 2

路线中的chnage：

.state('tab.chats', {
                url: '/chats',
                views: {
                    'tab-chats': {
                        templateUrl: 'templates/Q1.html',
                        controller: 'Q1Ctrl'
                    }
                },
                params: {
                    'Q1Answer': null,
             'Q2Answer': null
                }
            })

通过参数传递：

$scope.Q1Answer = {} // your object
 $scope.Q2Answer = {} // your object

 $state.go('tab.chats', {
  'Q1Answer' : $scope.Q1Answer,
  'Q2Answer' : $scope.Q2Answer
})

在控制器

中

.controller('Q1Ctrl', function($scope, Chats, $state, $stateParams) {

  $scope.Q1Answer = $stateParams.Q1Answer;
  $scope.Q2Answer = $stateParams.Q2Answer;
   console.log($scope.Q1Answer)
 console.log($scope.Q2Answer)
})

Ionic / AngularJS在控制器

2 个答案: