離子應用程序不會在頁面之間切換

我只是要求某人請查看我的代碼並告訴我爲什麼點擊按鈕後無法從登錄頁面註冊頁面。離子應用程序不會在頁面之間切換

我的登錄頁面的代碼是

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

    });

來源

2016-03-01 Sebastian

您想您的href看起來像這樣：

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

在href應該與你在你的國家給的網址：

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

不是模板網址。

編輯

我在你的代碼，你要使用的標籤指示，我也注意到，你缺少一個抽象狀態的評論看，Ionic's指南建立的路由可以幫助您通過步驟。

從對離子文檔

$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' 
})

來源

2016-03-01 04:53:56 Rarepuppers

所以當我複製你說的直接，按鈕仍沒有反應是什麼。文件名是sign-up.html，當我將href更改爲''並且狀態爲'.state（'註冊'，{ url：' /註冊」，//應匹配該觀點：{ '註冊'：{ templateUrl： '模板/籤up.html'，//不是這個控制器： 'SignUpCtrl' } } } ）;'我的網站確實改變了頁面，但我收到了一條消息「無法獲取/註冊」 – Sebastian

好的，我更新了我的答案，並找到了Ionic Docs的指南。讓我知道這是否有幫助。 – Rarepuppers

您可以使用ui-sref去一個狀態：

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

或者HREF去一個網址：

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

來源

2016-03-01 08:05:56 ddepablo

離子應用程序不會在頁面之間切換

回答

相關問題