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

时间:2015-06-19 10:02:59

标签: javascript angularjs ionic-framework

我正在研究离子框架。我不知道如何在两个页面之间导航。我试图使用离子使用侧面菜单模板创建一个登录页面。这里是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>   
当我点击菜单但是登录按钮在登录页面中不起作用时,

登录按钮正在工作。你帮我吗?我是离子和angularjs的新手

2 个答案:

答案 0 :(得分:0)

删除属性&#34; href&#34;并添加 ui-sref =&#34; app.signup&#34; ... 希望它能解决问题。

同样在路由配置中,更改视图对象名称&#34; menuContent&#34;为了单打。

import os
import subprocess
jpsop=os.popen("jps |grep Main|awk '{print $1}'").read()
print jpsop
#print jpsop.partition(' ')[2]

for pid in jpsop.split():
    print pid
    subprocess.Popen(['/home/muthu/Downloads/check_jstat.sh', '-p' +     pid])
    print output
#  os.system('/home/muthu/Downloads/check_jstat.sh')

答案 1 :(得分:0)

这应该有帮助,

List<object>

你的路由应该是,

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

UI-Router由AngularJS和Ionic使用。因此,请考虑使用 <ion-item nav-clear menu-close ui-sref="app.login"> Login </ion-item> 属性。 这还有一个优点,显然你的父母国家仍然受到“应用程序”的约束。当你使用say例如ui-sref时。处理Angular时不要使用ui-sref="app.login"。你有一个Angular选项,href

为signUp页面添加ng-href

希望这会有所帮助