无法让“ion-nav-view”工作

Question

我尝试从 Ionic 实现 ion-nav-view，因此我可以获得一个类似于 Android 本机工具栏的工具栏。为此，我遵循了 here.

中描述的说明

所以我创建了以下 index.html:

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <!-- Ionic -->
    <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.css">
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- myApp -->
    <link rel="stylesheet" type="text/css" href="css/general.css">
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/factory.js"></script>
    <script type="text/javascript" src="js/controller.js"></script>
</head>

<body>
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>

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

</html>

还有这个app.js：

var myApp = angular.module('myApp', ['ionic']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('index', {
        url: '/',
        templateUrl: 'views/home.html'
    }).state('prints', {
        url: '/prints',
        templateUrl: 'views/photo_prints.html'
    }).state('box', {
        url: '/box',
        templateUrl: 'views/photo_box.html'
    }).state('framed', {
        url: '/framed',
        templateUrl: 'views/photo_framed.html'
    }).state('xxl', {
        url: '/xxl',
        templateUrl: 'views/photo_xxl.html'
    }).state('collage', {
        url: '/collage',
        templateUrl: 'views/photo_collage.html'
    }).state('coupon', {
        url: '/coupon',
        templateUrl: 'views/photo_coupon.html'
    });

    $urlRouterProvider.otherwise("/");
});

这里举个例子 views/home.html:

<script id="home" type="text/ng-template">
    <ion-view view-title="Home">
        <ion-content ng-controller="HomeController">
            <a href="#/prints">Prints</a>
            <a href="#/box">Box</a>
            <a href="#/book">Book</a>
        </ion-content>
    </ion-view>
</script>

但是当我现在启动应用程序时，我只能看到以下内容：

文档说明如下：

Then on app start, $stateProvider will look at the url, see it matches the index state, and then try to load home.html into the <ion-nav-view>.

因此，要么当我启动该应用程序时该应用程序未处于索引状态，要么我又犯了另一个错误。有人可以帮我吗？

Answer 1

你的home.html应该是普通的html，不应该使用<script id="home" type="text/ng-template">，由于 ng-template 类型，它将使用 URL home 创建一个模板并将其放入 angular

的 $templateCache 中

从那里删除脚本标签将解决您的问题。我认为你对其他 html 也犯了同样的错误

Home.html

<ion-view view-title="Home">
    <ion-content ng-controller="HomeController">
        <a href="#/prints">Prints</a>
        <a href="#/box">Box</a>
        <a href="#/book">Book</a>
    </ion-content>
</ion-view>

无法让“ion-nav-view”工作

Cant get `ion-nav-view` to work

angularjs

cordova

angular-ui-router

ionic-framework

ionic