如何在離子的兩個頁面之間導航

Question

我正在開發ionic框架。我不知道如何在兩個頁面之間導航。我試圖使用ionic使用側面菜單模板創建登錄頁面。這是login.html的代碼

<ion-view view-title="Login">
<ion-header-bar>
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
  <div class="list">
    <label class="item item-input item-stacked-label">
    <span class="input-label">Username</span>
    <input type="text" placeholder="Email or Phone">
    </label>
    <label class="item item-input item-stacked-label">
    <span class="input-label">Password</span>
    <input type="text" placeholder="Password">
    </label>
    <label class="item">
    <button class="button button-block button-positive" type="submit">Log in</button>
    </label>
    <label class="item">
    <span class="input-label">New user?</span>
    <a class="button ion-plus-round" href="#/app/signup">Signup</a>    
    </label>

  </div>
</form>
</ion-content>
</ion-view>

在app.js中：-

.state('app.login', {
    url: "/login",
    views: {
      'menuContent': {
        templateUrl: "templates/login.html",
        controller: 'LoginCtrl'
      }
    }
  })
  .state('app.signup', {
    url: '/signup',
    views: {
      'menuContent': {
        templateUrl: 'templates/signup.html',
        controller: 'LoginCtrl'
      }
    }
  })

我將登錄按鈕放在menu.html中，其余的都一樣

 <ion-item nav-clear menu-close href="#/app/login">
          Login
        </ion-item>   

當我單擊菜單中的登錄按鈕時，但登錄頁面中的注冊按鈕不起作用。您能幫我嗎？我是ionic和angularjs的新手

Answer 1

刪除屬性“ href”並添加ui-sref =“ app.signup” ...希望它將解決問題。

同樣在路由配置中，更改視圖對象名稱“ menuContent”以進行合並。

.state('app.login', {
    url: "/login",
    views: {
      'menuLogin': {
        templateUrl: "templates/login.html",
        controller: 'LoginCtrl'
      }
    }
  })
  .state('app.signup', {
    url: '/signup',
    views: {
      'menuSingup': {
        templateUrl: 'templates/signup.html',
        controller: 'LoginCtrl'
      }
    }
  })

Answer 2

這應該有幫助，

<ion-view view-title="Login" name="loginView">
<ion-header-bar>
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
  <div class="list">
    <label class="item item-input item-stacked-label">
    <span class="input-label">Username</span>
    <input type="text" placeholder="Email or Phone">
    </label>
    <label class="item item-input item-stacked-label">
    <span class="input-label">Password</span>
    <input type="text" placeholder="Password">
    </label>
    <label class="item">
    <button class="button button-block button-positive" type="submit">Log in</button>
    </label>
    <label class="item">
    <span class="input-label">New user?</span>
    <a class="button ion-plus-round" ui-sref="app.signup">Signup</a>    
    </label>

  </div>
</form>
</ion-content>
</ion-view>

您的路線應該是

.state('app.login', {
    url: "/login",
    views: {
      'loginView': {
        templateUrl: "templates/login.html",
        controller: 'LoginCtrl'
      }
    }
  })
  .state('app.signup', {
    url: '/signup',
    views: {
      'signupView': {
        templateUrl: 'templates/signup.html',
        controller: 'LoginCtrl'
      }
    }
  })

您的登錄按鈕，

 <ion-item nav-clear menu-close ui-sref="app.login">
          Login
        </ion-item> 

UI-Router由AngularJS和Ionic使用。 因此，請考慮使用ui-sref屬性。 這還有另一個優勢，顯然，當您使用諸如ui-sref="app.login"時，您的父狀態仍然綁定到'app'。 處理Angular時不要使用href 。 為此，您有一個Angular選項，即ng-href 。

為注冊頁面添加<ion-view view-title="Signup" name="signupView">

希望這可以幫助