如何在离子中的两个页面之间导航

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

这应该会有所帮助，

<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" 时，您的父状态仍然绑定到“应用程序”。处理 Angular 时不要使用href。您有一个 Angular 选项，即ng-href。

为注册页面添加<ion-view view-title="Signup" name="signupView">

希望对你有帮助

Answer 2

删除属性“href”并添加ui-sref="app.signup"... 希望它能解决问题。

同样在路由配置中，更改视图对象名称“menuContent”以进行 singup。

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