Fatal编程技术网
  • angularjs/
  • Angularjs 获取Ionic Framework以在iPhone/Android环境中显示内容（移动浏览器模拟器）

Angularjs 获取Ionic Framework以在iPhone/Android环境中显示内容（移动浏览器模拟器）

angularjs ibm-mobilefirst ionic-framework

Angularjs 获取Ionic Framework以在iPhone/Android环境中显示内容（移动浏览器模拟器）,angularjs,ibm-mobilefirst,ionic-framework,Angularjs,Ibm Mobilefirst,Ionic Framework,我正在尝试获取在IBM Worklight中工作的离子框架Beta 6的示例 我有bootstrap Angular.js，它可以与Worklight一起正常工作。当我在浏览器（Firefox/Chrome）上运行/构建项目时。下面的示例正在运行，内容显示在屏幕上 但是，当我创建iPhone环境并在移动浏览器模拟器或设备上运行时，页面是空白的 是否有人知道什么会导致空白页面，即使内容在普通浏览器中显示得很好？ index.html <!DOCTYPE html> <html&g

我正在尝试获取在IBM Worklight中工作的离子框架Beta 6的示例

我有bootstrap Angular.js，它可以与Worklight一起正常工作。当我在浏览器（Firefox/Chrome）上运行/构建项目时。下面的示例正在运行，内容显示在屏幕上

但是，当我创建iPhone环境并在移动浏览器模拟器或设备上运行时，页面是空白的

是否有人知道什么会导致空白页面，即使内容在普通浏览器中显示得很好？

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>

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


离子的
window.$=window.jQuery=WLJQ；
menu.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>

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


标题
项目
项目
项目
左菜单
项目
项目
项目
查看此相关问题：
您可以在iOS模拟器中进行测试

下面是一篇关于Worklight和Ionic的博客文章，其中包含一个完整的示例项目：

我遇到了类似的问题，即帐户页面中的帐户列表没有显示在移动浏览器模拟器中。我正在使用Worklight Studio 6.2。。。。但是，自从我升级到这个版本6.2.0.00-20140801-1709以来，这个问题就解决了。

我应用了“IBM Worklight v6.1.0.1：将Ionic Framework与Worklight一起使用并在IOS环境上运行时出错”链接中建议的更改，但它只显示一个截断标题栏，没有列表。似乎有其他东西挡住了内容。我不确定还需要什么？您需要在保存内容的元素中添加填充。正如我所说，爱奥尼亚没有得到官方支持。