Question

我正在使用phonegap和Ionic撰写网络应用。我想在不同的文件中编写每个HTML页面，但我无法做到这一点。在Ionic API中，它们仅显示以下示例：

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Home">
    <ion-content class="padding">
      <p>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

这是在<script>页面的index.html代码中编写的HTML代码。我试图创建一个名为home.html的不同文件，并收到以下错误：

XMLHttpRequest无法加载文件：path-to-the-file。交叉源请求仅支持协议方案：http，数据，chrome扩展，https，chrome-extension-resource。

我的js看起来像这样：

angular.module('myApp', ['ionic'])


.config(function ($stateProvider, $urlRouterProvider) {
// Set and define states
$stateProvider
    .state('/', {
        url: '/',
        templateUrl: 'index.html'
    })
    .state('home', {
        url: '/home',
        templateUrl: 'templates/home.html'
    });

$urlRouterProvider.otherwise("/");

}）

和html页面：

<ion-view title="home">
<ion-content>
   The content of the page 
  <a href="#/home">Register</a>
</ion-content>

我看到index.html页面带有注册链接，但是点击它并没有执行任何操作。它似乎只有在它包含在<script>标签中时才有效。有什么建议吗？

Answer 1

删除脚本标记。 Ionic为您做到了这一点：

<script id="templates/home.html" type="text/ng-template">

并且你不能通过加载index.html作为基本状态来使用ui-router，因为索引应该有第一个ui-router html标记。如果要具有基本/抽象状态，则需要包含在index.html中并创建某种菜单文件，如下所示：

angular.module('myApp', ['ionic'])

.config(function ($stateProvider, $urlRouterProvider) {
// Set and define states
$stateProvider
    .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'templates/menu.html'
    })
    .state('app.home', {
        url: '/home',
        templateUrl: 'templates/home.html'
    });

$urlRouterProvider.otherwise("/app");

如何在Ionic的另一个文件中添加模板？

1 个答案: