在离子框架中导航

Question

我是 Ionic Framework 的初学者。我已将模板加载到索引文件中，但无法从登录屏幕移动到注册屏幕。请看看我的代码，让我知道哪里错了。

Index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IonicApp</title>
</head>

<body>

    <html ng-app="ionicApp">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>IonicApp</title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <link href="css/font-awesome.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    </head>

    <body>

        <ion-nav-bar>
            <ion-nav-back-button class="button-icon ion-arrow-left-c">
            </ion-nav-back-button>
        </ion-nav-bar>

        <ion-nav-view></ion-nav-view>
    </body>

    </html>
    <script src="js/app.js"></script>
</body>

</html>

Login.html

<ion-view view-title="Login" class="login" hide-nav-bar="true">
    <ion-content scroll="false">
        <div class="content">
            <div class="row topgap">
                <div class="col-80 col-offset-10">
                    <div class="fixWidthContainer">
                        <h2 class="text-center">Welcome to App</h2>
                        <input type="email" placeholder="Email" />
                        <input type="password" placeholder="Password" />
                        <br />
                        <button class="button button-full LoginButton">Login</button>
                        <button class="button button-full LoginButton facebook">Sign up using Facebook</button>
                        <br />
                        <button class="button button-full LoginButton forgot">Forgot Password?</button>
                        <br />
                        <a class="button button-full LoginButton forgot" ng-href="templates/signup.html">Sign Up</a>
                    </div>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

Signup.html

<ion-view view-title="Sign Up" class="login" hide-nav-bar="true">
    <ion-content class="has-footer" scroll="false">
        <div class="row topgap">
            <div class="col-80 col-offset-10">
                <div class="fixWidthContainer">
                    <h2 class="text-center">Welcome to App</h2>
                    <input type="text" placeholder="Full Name" />
                    <input type="email" placeholder="Email" />
                    <input type="password" placeholder="Password" />
                    <br />
                    <button class="button button-full LoginButton">Sign up</button>
                    <button class="button button-full LoginButton facebook">Sign up using Facebook</button>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

App.js

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider    
    .state('login', {
      url: '/login',
      templateUrl: 'templates/login.html',
      //controller: 'loginControl'
    })
    .state('signup', {
      url: '/signup',
      templateUrl: 'templates/signup.html',
      //controller: 'signupControl'
    })

    $urlRouterProvider.otherwise('/login');
}) // Main Controller Ends

如果我从控制器中删除评论，页面会受到干扰。

Answer 1

请像这样改变你的index.html，

<!DOCTYPE html>
<html ng-app="ionicApp">

<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>IonicApp</title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/app.js"></script>
</head>

<body>
    <ion-nav-bar>
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
</body>

</html>

在离子框架中导航

Navigate in Ionic Framework

angularjs

ionic-framework

ionic

ionic-view