获取Ionic框架以在iPhone / Android环境(移动浏览器模拟器)中显示内容

问题描述 投票:0回答:2

我正在尝试为在IBM Worklight中工作的Ionic Framework Beta 6获得此样本。

我有引导Angular.js,并使其与Worklight一起正常工作。当我在浏览器(Firefox / Chrome)上运行/构建项目时。下面的示例正在工作,并且内容显示在屏幕上。

但是,当我创建iPhone环境并在Mobile Browser Simulator或设备上运行时,该页面为空白。

即使在常规浏览器中内容显示正常,没有人知道是什么原因导致空白页吗?

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Ionic</title>
  <link rel="shortcut icon" href="images/favicon.png">
  <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/ionic.css">
  <script src="js/ionic.bundle.js"></script>
  <script>
      window.$ = window.jQuery = WLJQ;
  </script>
</head>

<body>
  <div ui-view></div>

  <script src="js/index.js"></script>
  <script src="js/initOptions.js"></script>
  <script src="js/main.js"></script>
  <script src="js/messages.js"></script>
</body>
</html>

menu.html

   <ion-side-menus>

    <ion-side-menu-content>
      <ion-header-bar class="bar-positive">
        <h1 class="title">Title</h1>
      </ion-header-bar>

      <ion-content>
        <ion-list>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu-content> 

    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive">
        <h1 class="title">Left Menu</h1>
      </ion-header-bar>
      <ion-content>
       <ion-list>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
          <ion-item>Item</ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>

  </ion-side-menus>
angularjs ibm-mobilefirst ionic-framework
2个回答
0
投票

参见此相关问题:IBM Worklight v6.1.0.1 : Error when using Ionic Framework with Worklight and run on IOS environment您可以在iOS模拟器中进行测试。

这里是有关Worklight和Ionic的博客文章,其中包含完整的示例项目:http://mobileroly.blogspot.co.il/2014/04/using-angular-js-and-ionic-on-ibm.html


0
投票

我遇到了类似的问题,帐户页面中的帐户列表未显示在Mobile Browser Simulator中。我正在使用Worklight Studio 6.2 ....,但由于我已升级到此版本6.2.0.00-20140801-1709,因此已解决此问题。

© www.soinside.com 2019 - 2024. All rights reserved.