Ионные состояния переключения с $ 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 и вставляете неизвестный модуль «quiz» в index.html. изменить эту строку 'вар викторина = angular.module ('стартер', [ 'ионную'])' к 'вар викторина = angular.module ('Тест', [ 'ионную'])' –

Вы должны также исправьте свои маршруты, и html не должен находиться в index.html. Создавайте отдельные представления для каждого из ваших контроллеров. Обратитесь к документации/учебнику, чтобы узнать основы ионного приложения. –

Ионные состояния переключения с $ state.go

ответ

Смежные вопросы