Как перемещаться между двумя страницами в ионном

Question

Я работаю над ионной каркасной картой. Я не знаю, как перемещаться между двумя страницами. Я пытался создать страницу входа в систему, используя ионный, используя шаблон бокового меню. Здесь идет код для входа. 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> 

кнопки Войти работает, когда я нажимаю в меню, но кнопка Регистрации не работает в логине page.Can у мне помочь? Я новичок в ионном и 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-маршрутизатор используется AngularJS и ионического , Поэтому рассмотрим использование атрибута ui-sref. У этого есть еще одно преимущество, очевидно, что ваше родительское состояние остается привязанным к «приложению», когда вы используете, скажем, например, ui-sref="app.login". Не используйте href при работе с Угловым. У вас есть опция «Угловая», которая равна ng-href.

добавить <ion-view view-title="Signup" name="signupView"> для SIGNUP страницы

надеюсь, что это помогает

Answer 2

Удалить атрибут «HREF» и добавьте щ-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' 
     } 
    } 
    })