2016-03-01 2 views
0

Я прошу кого-нибудь посмотреть мой код и рассказать мне, почему я не могу перейти от входа в систему, чтобы зарегистрировать страницу после нажатия кнопки.ионное приложение не переключается между страницами

мой Логин кодовая страница

<ion-view view-title="Login" > 
<ion-content class="padding"> 
    <label class="item item-input"> 
     <input type="text" placeholder="email"> 
    </label> 
    <label class="item item-input"> 
     <input type="text" placeholder="Password"> 
    </label> 
    <button class="button">login</button> 
    <a nav-transition="android" href="#/sign-up"> 
     <button class="button">Sign up</button> 
    </a> 
    <button class="button">Forgot password</button> 
</ion-content> 

Мой подписаться страница выглядит следующим образом

<ion-view view-title="Sign Up" > 

<!-- content goes here --> 
<ion-list> 
    <ion-item> 
    <h2>My Profile</h2> 
    <div class="list"> 
     <label class="item item-input"> 
      <span class="input-label">Age*</span> 
      <input type="range" name="volume" min="18" max="100" value="21"> 
     </label> 
     <label class="item item-input"> 
      <span class="input-label">Gender*</span> 
      <select> 
       <option>Male</option> 
       <option>Female</option> 
      </select> 
     </label> 
    </div> 
    </ion-item> 
</ion-list> 
</ion-content> 

наконец моя страница app.js выглядит

// 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' 
// 'starter.services' is found in services.js 
// 'starter.controllers' is found in controllers.js 
angular.module('social-arena', ['ionic', 'social-arena.controllers', 'social-arena.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) { 

    // Ionic uses AngularUI Router which uses the concept of states 
     // Learn more here: https://github.com/angular-ui/ui-router 
     // Set up the various states which the app can be in. 
     // Each state's controller can be found in controllers.js 
     $stateProvider 

     // setup an abstract state for the tabs directive 
     .state('login', { 
     url: '/login', 
     views: { 
      'login': { 
      templateUrl: 'templates/login.html', 
      controller: 'LoginCtrl' 
      } 
     } 
     }) 

     .state('signup', { 
      url: '/signup', 
      views: { 
      'signup': { 
       templateUrl: 'templates/sign-up.html', 
       controller: 'SignUpCtrl' 
      } 
      } 
     }); 


     // if none of the above states are matched, use this as the fallback 
     $urlRouterProvider.otherwise('/login'); 

    }); 

ответ

0

Вы хотите, чтобы ваш HREF выглядеть следующим образом:

<a nav-transition="android" href="#/signup"> 

HREF должен соответствовать URL вы даете в вашем штате:

.state('signup', { 
     url: '/signup', // should match this 
     views: { 
     'signup': { 
      templateUrl: 'templates/sign-up.html', //not this 
      controller: 'SignUpCtrl' 
     } 
     } 
    }); 

не шаблон URL.

редактировать

Я вижу в комментариях в коде, который вы пытаетесь использовать директиву ушек, и я также заметил, что вам не хватает абстрактное состояние, Ionic's руководства по настройке маршрутизации может помочь вам шаги.

Из примера на Ионическом Docs

$stateProvider.state('app.todos', { 
    abstract: true, 
    url: '/todos', 
    views: { 
    todos: { 
     template: '<ion-nav-view></ion-nav-view>' 
    } 
    } 
}) 

Как вы можете видеть, они установили один вид, как и абстрактные

abstract:true, 

и затем остальные ваши мнения ссылаются на абстрактные , опять же из документов:

$stateProvider.state('app.todos.index', { 
    url: '', 
    templateUrl: 'todos.html', 
    controller: 'TodosCtrl' 
}) 
+0

Хорошо, я обновил свой ответ и нашел руководство от Ionic Docs. Дайте мне знать, если это поможет. – Rarepuppers

0

Вы можете использовать ui-sref идти в состояние:

<a nav-transition="android" ui-sref="signup"> 

Или HREF пойти на URL:

<a nav-transition="android" href="#/signup"> 
Смежные вопросы