导航在 Ionic 中不起作用答案

【问题标题】：Navigation Doesn't work in Ionic导航在 Ionic 中不起作用
【发布时间】：2016-02-18 10:48:07
【问题描述】：

我正在开发一个基于 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');
});

现在，每当我点击 Go To page 2 按钮时，URL 都会从 http://localhost/sample/index.html# 到 http://localhost/sample/index.html#/page2，但页面无法导航，如果我手动键入 URL，则不会显示第 2 页的内容。

【问题讨论】：

标签： javascript android angularjs cordova ionic-framework

【解决方案1】：

您还可以使用href 在 HTML 中进行导航

例如

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

【讨论】：

【解决方案2】：

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

更新：

codepen 也可以在不更改 id 的情况下工作。您可能使用的是较旧的 ionic 库，并且 ionicHistory 可能未定义。

【讨论】：

错字错误在问题中，但实际代码具有正确的控制器名称

【解决方案3】：

使用$location 代替$state：

HTML

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

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

【讨论】：