导航在 Ionic 中不起作用

Navigation Doesn't work in Ionic

本文关键字：不起作用 Ionic 导航      更新时间：2023-09-26

我正在开发一个基于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 页"按钮时，URL 都会从 http://localhost/sample/index.html# http://localhost/sample/index.html#/page2，但页面无法导航，如果我手动输入 URL，则不会显示第 2 页的内容。

您还可以使用 HTML 中的导航href

例如

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

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

更新：

Codepen 在不更改 ID 的情况下工作。您可能正在使用较旧的离子库，并且ionicHistory可能未定义。

使用 $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'
    });
相关文章：