1
Ionic Frameworkを使用して基本的なクイズアプリケーションを構築していますが、コントローラ間でパラメータを渡すのに苦労しています。私は$ scopeと$ stateParamsを使ってこれを行う必要があります。どんな助けもありがとう！以下は、私のapp.js、controllers.js、およびQ2.html、私のプロジェクトのHTMLファイルの1つです。コントローラ間でIonic/AngularJSのパラメータを渡します
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');
});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
})
}
});<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>