Question

我正在开发基于Ionic的Android应用程序。这是HTML标记：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <link href="css/ionic.app.css" rel="stylesheet">
    <script src="js/app.js"></script>
</head>

<body ng-app="app">
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
    <script id="home.html" type="text/ng-template">
        <ion-view view-title="Home">
            <ion-content>
                <p>This is Page 1</p>
                <buton class="button button-positive" ng-click="gotoNextPage()">Go to Page 2</button>
            </ion-content>
        </ion-view>
    </script>
    <script id="page2.html" type="text/ng-template">
        <ion-view view-title="page2">
            <ion-content>
                <p>this is page 2</p>
            </ion-content>
        </ion-view>
    </script>
</body>

</html>

...以下是AngularJS代码：

var app = angular.module('app', ['ionic', 'ui.router']);
app.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});
app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('home', {
      url: '/',
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    })
      .state('page2', {
      url: '/page2',
      templateUrl: 'page2.html',
      controller: 'Page2Ctrl'
    });
    $urlRouterProvider.otherwise('/');
});
app.controller('HomeCtrl', function($scope, $state) {
    $scope.gotoNextPage = function() {
        $state.go('page2');
    };
});
app.controller('Page2Ctrl', function($scope, $ionicHistory) {
    alert('hi');
});

现在，每当我点击转到第2页按钮时，网址就会发生变化 http://localhost/sample/index.html#到http://localhost/sample/index.html#/page2，但页面无法导航，如果我手动输入网址，则不会显示第2页的内容。

Answer 1

使用$location代替$state：

HTML

<button class="button button-positive" ng-click="gotoNextPage('/page2')">Go to Page 2</button>

JS

app.controller('HomeCtrl', function ($scope, $location) {

$scope.gotoNextPage = function (path) {
        $location.path("/page2");
    }
};

此外，将每个视图移动到它自己的html文件中会更清晰。所以你的目录结构可能如下所示：

www/
--- index.html
--- templates/
------- home.html
------- page2.html

您的index.html正文将是：

<body ng-app="app">
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
            <i class="ion-arrow-left-c"></i>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
</body>

您的page1.html可以是：

<ion-content>
    <p>This is Page 1</p>
        <buton class="button button-positive" ng-click="gotoNextPage('/page2')">Go to Page 2</button>
</ion-content>

page2.html：

<ion-content>
     <p>this is page 2</p>
</ion-content>

在这种情况下，您的州看起来像：

.state('home', {
      url: '/',
      templateUrl: 'templates/home.html',
      controller: 'HomeCtrl'
    })

 .state('page2', {
      url: '/page2',
      templateUrl: 'templates/page2.html',
      controller: 'Page2Ctrl'
    });

Answer 2

您还可以使用href

在HTML中进行导航

例如

<a class="button button-positive" href="#/page2">Go to Page 2</a>

Answer 3

好的，我已经制作了一个codepen。我刚刚将id更改为<script id="templates/home.html" type="text/ng-template">，并且在路由中也将路由和页面及其工作更改为但我无法解释原因。有人可能会帮助解释http://codepen.io/nabinkumarn/pen/PZgMwg。

<强>更新

codepen正在运行，也没有更改ID。您可能正在使用较旧的离子库，而ionicHistory可能未定义。

导航在Ionic中不起作用

3 个答案: