Question

我只是要求有人请查看我的代码并告诉我为什么单击按钮后我无法从登录页面进入注册页面。

我的登录页面代码是

<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');

    });

Answer 1

您希望您的href看起来像这样：

_detail

href应与您在州内提供的网址相匹配：

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

不是模板网址。

修改

我在您的代码中的注释中看到您正在尝试使用tabs指令，而且我还注意到您缺少抽象状态，Ionic's设置路由的指南可以帮助您完成这些步骤。

来自Ionic Docs上的示例

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

如您所见，他们将一个视图设置为抽象

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

然后将其余视图链接到摘要，再次从文档：

abstract:true,

Answer 2

您可以使用ui-sref转到州：

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

或者href转到网址：

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

离子应用程序不会在页面之间切换

2 个答案: