無法讓`ion-nav-view`工作

我試圖從Ionic實現ion-nav-view，所以我可以得到一個類似於Android本機工具欄的工具欄。爲此我遵循here的說明。無法讓`ion-nav-view`工作

所以我創建了以下的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("/"); 
});

要在這裏展示一個例子的意見/ 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>

但是，當我現在啓動應用程序，我所能看到的是以下內容：

enter image description here

文檔說以下內容：

然後在應用程序啓動，$ stateProvider會看網址，看到它的指數狀態相匹配，然後嘗試home.html的裝入<ion-nav-view> 。

因此，當我啓動它時，或者應用程序不處於索引狀態，或者我有另一個錯誤。有人可以幫我嗎？

來源

2015-05-02 Mulgard

如果您在您的index.html – Michael

你home.html應該是純HTML，它不應該使用<script id="home" type="text/ng-template">，因爲ng-template型它將創建一個模板，它的URL home &就會把它裏面的角

$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>

來源

2015-05-02 16:15:45

好吧定義模板，您只需要NG-模板！謝謝！而已！ – Mulgard

@Makz很高興聽到，它也幫助你，謝謝:) –

無法讓`ion-nav-view`工作

回答

相關問題