在& lt; ion-nav-view& gt;中显示html内容 [英] Display html content in <ion-nav-view>

问题描述

在使用 ionic 之前，我曾经有< div ng-view></div> .我将使用那个 div 作为包装器来包含我想要的任何 html .

I used to have <div ng-view></div> before i use ionic. I will use that div as a wrapper to contain any html i want.

我试图对 ionic 做同样的事情.这是我的 index.html :

I tried to do the same thing with ionic. This is my index.html :

<ion-pane>
  <ion-content>
    <ion-nav-view></ion-nav-view>
  </ion-content>
</ion-pane>

这是我的离子路由器:

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('main', {
        url: '/',
        templateUrl: 'views/main.html'
    })

    $urlRouterProvider.otherwise('/jobs')
})

但是它没有加载 views/main.html .

我尝试在 views/main.html 中使用 text/ng-template ，所以看起来像这样:

I tried to use text/ng-template in my views/main.html, so it looks like this :

<div>
    <ion-view>
        <p></p>
    </ion-view>
</div>

但是它仍然没有加载.控制台中没有错误或警告.

But its still not loading. There is no error or warning in the console.

请帮助我.感谢您的帮助.

Please kindly help me. Thanks for your help.

更新

如果我在templateUrl中使用错误的html路径，则控制台显示错误:

If i use wrong html path in templateUrl, the console shows error :

GET http://localhost:8100/views/main2.html 404 (Not Found)

但是，当我使用正确的路径时，不会显示内容(仅

).

However when i use the correct path, the cotent (only a

) is not displayed.

推荐答案

您的模板有2种解决方案，我想您将两种解决方案混合了

You have 2 solutions for your template, and I think you mixed the two solutions

1. 您可以将其包装在< script type ="text/ng-template" id ="main.html"></script> 中，但您必须在手动关闭页面< script src ="></script> .如果您使用此解决方案，则无需在路由 templateUrl中写路径:'views/main.html' id足够 templateUrl:'main.html'

1. you can wrap it in <script type="text/ng-template" id="main.html"></script> but you will have to in clude your page manualy <script src=""></script> .If you use this solution, you don't have to write the path in routing templateUrl: 'views/main.html' the id is enough templateUrl: 'main.html'

只需将未包装的内容< ion-view><！-content-</ion-view> 放在html文件中并编写正确的路径在templateUrl

Simply put your unwrapped content <ion-view><!--content--></ion-view> in a html file and write the correct path in templateUrl

这篇关于在& lt; ion-nav-view& gt;中显示html内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！