帶有$ state.go的離子切換狀態

我對Ionic和HTML/JS非常陌生，但我正在嘗試開發一個基本應用程序，其中包含4個視圖，並使用$ state.go進行切換。第一個視圖包含一個按鈕，當它被點擊時，它應該切換到第二個狀態，但不是。任何關於如何糾正這一問題的建議都非常感謝。

我的app.js和index.html如下。

// Ionic Starter App 
 

 
// angular.module is a global place for creating, registering and retrieving Angular modules 
 
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) 
 
// the 2nd parameter is an array of 'requires' 
 
var quiz = angular.module('starter', ['ionic']) 
 

 
    .run(function($ionicPlatform) { 
 
    $ionicPlatform.ready(function() { 
 
     if(window.cordova && window.cordova.plugins.Keyboard) { 
 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
 
     // for form inputs) 
 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
 

 
     // Don't remove this line unless you know what you are doing. It stops the viewport 
 
     // from snapping when text inputs are focused. Ionic handles this internally for 
 
     // a much nicer keyboard experience. 
 
     cordova.plugins.Keyboard.disableScroll(true); 
 
     } 
 
     if(window.StatusBar) { 
 
     StatusBar.styleDefault(); 
 
     } 
 
    }); 
 
    }) 
 

 
    .config(function($stateProvider, $urlRouterProvider) { 
 

 
    $stateProvider 
 
    .state('index', { 
 
     url: '/', 
 
     abstract: true, 
 
     templateUrl: 'index.html' 
 
    }) 
 
    .state('page1', { 
 
     url: "/page1", 
 
     params: { 
 
     'imageQuestionAnswer':null, 
 
     'textQuestionAnswer':null 
 
     }, 
 
     controller: 'page1Ctrl' 
 
    }) 
 
    .state('imageQuestion', { 
 
     url: "/imageQuestion", 
 
     params: { 
 
     'imageQuestionAnswer':null, 
 
     'textQuestionAnswer':null 
 
     }, 
 
     controller: 'pictureQCtrl' 
 
    }) 
 
    .state('textQuestion', { 
 
     url: "/textQuestion", 
 
     params: { 
 
     'imageQuestionAnswer':null, 
 
     'textQuestionAnswer':null 
 
     }, 
 
     controller: 'textQCtrl' 
 
    }) 
 
    .state('result', { 
 
     url: "/result", 
 
     params: { 
 
     'imageQuestionAnswer':null, 
 
     'textQuestionAnswer':null 
 
     }, 
 
     controller: 'resultCtrl' 
 
    }) 
 
}) 
 

 
    $urlRouterProvider.otherwise("index.html") 
 

 

 
quiz.controller("page1Ctrl", function($scope, $ionicModal, $ionicLoading, $state) { 
 

 
    $scope.onStart = function() { 
 
    $state.go("imageQuestion", { 
 
     'imageQuestionAnswer':null, 
 
     'textQuestionAnswer':null 
 
    }) 
 
    } 
 

 
}) 
 

 
quiz.controller("pictureQCtrl", function($scope, $ionicModal, $ionicLoading, $state) { 
 

 
}) 
 

 
quiz.controller("textQCtrl", function($scope, $ionicModal, $ionicLoading, $state) { 
 

 
}) 
 

 
quiz.controller("resultCtrl", function($scope, $ionicModal, $ionicLoading, $state) { 
 

 
})

<!DOCTYPE html> 
 
<html ng-app='quiz'> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title>Welcome to my quiz app!</title> 
 

 
    <link rel="manifest" href="manifest.json"> 
 

 
    <!-- un-comment this code to enable service worker 
 
    <script> 
 
     if ('serviceWorker' in navigator) { 
 
     navigator.serviceWorker.register('service-worker.js') 
 
      .then(() => console.log('service worker installed')) 
 
      .catch(err => console.log('Error', err)); 
 
     } 
 
    </script>--> 
 

 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
 
    <link href="css/style.css" rel="stylesheet"> 
 

 
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
 
    <link href="css/ionic.app.css" rel="stylesheet"> 
 
    --> 
 

 
    <!-- ionic/angularjs js --> 
 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
 

 
    <!-- cordova script (this will be a 404 during development) --> 
 
    <script src="cordova.js"></script> 
 

 
    <!-- your app's js --> 
 
    <script src="js/app.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <ion-nav-bar class="bar-positive"> 
 
    <ion-nav-back-button> 
 
    </ion-nav-back-button> 
 
    </ion-nav-bar> 
 

 

 
    <ion-nav-view></ion-nav-view> 
 

 

 
    <ion-content> 
 
    <ion-view view-title="Welcome!"> 
 
    <ion-content class = "padding"> 
 
     <div> 
 
     <button class = "button button-royal" ng-click = "onStart()">Start</button> 
 
     </div> 
 
    </ion-content> 
 
    </ion-view> 
 
    </ion-content> 
 

 
    <script id = "imageQuestion" type="text/ng-template"> 
 
    <div> 
 
    Question 2! 
 
    </div> 
 
    </script> 
 
    </body> 
 
</html>

來源

2017-02-16 Walter

要調用的onsubmit（）函數，但在控制你聲明的函數名稱$ scope.onStart。改變函數名稱，它會工作。

來源

2017-02-16 06:10:43

我已經做了這個修正並編輯了上面的代碼，但仍然有同樣的問題。 – Walter

你犯了另一個錯誤，你是在app.js中定義你的模塊爲'starter'，並在index.html中注入未知模塊'測驗'。變化這一行 '變種測驗= angular.module（ '起始'，[ '離子']）' 到 'VAR測驗= angular.module（ '測驗'，[ '離子']）' –

你應該也糾正你的路線和html不應該在index.html。爲每個控制器創建單獨的視圖。請參閱文檔/教程以瞭解離子應用的基礎知識。 –

帶有$ state.go的離子切換狀態

回答

相關問題