1

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

<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>标签内编写的 HTML 代码。index.html例如，我尝试使用该名称创建一个不同的文件，但home.html收到以下错误：

XMLHttpRequest 无法加载文件：文件路径。跨源请求仅支持协议方案：http、data、chrome-extension、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>标签中时它才能工作。有什么建议么？

4

1 回答 1

1

摆脱脚本标签。Ionic 为您执行此操作：

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

而且您不能通过加载 index.html 作为基本状态来使用 ui-router，因为 index 应该具有第一个 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");
于 2015-01-20T23:53:41.480 回答