带有$ state.go

时间:2017-02-16 05:22:39

标签: ionic-framework

我对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) {

})
&#13;
<!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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您正在调用onSubmit()函数,但在控制器中您已声明函数名称$ scope.onStart。更改功能名称,它会起作用。