IBM Worklight v6.1.0.1：将 Ionic Framework 与 Worklight 一起使用并在 IOS 环境中运行时出错答案

【问题标题】：IBM Worklight v6.1.0.1 : Error when using Ionic Framework with Worklight and run on IOS environmentIBM Worklight v6.1.0.1：将 Ionic Framework 与 Worklight 一起使用并在 IOS 环境中运行时出错
【发布时间】：2014-07-12 08:03:21
【问题描述】：

我使用 Ionic 和 Worklight 创建了演示应用程序，它可以在 Android 上运行，但在 IOS 上出现错误，当我使用移动浏览器模拟器并在IOS环境下调试时，我收到以下错误消息：

Uncaught InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('platform-ios - iphone') contains HTML space characters, which are not valid in tokens.

我只是在 index.html 中添加 Ionic 文件：

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>index</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <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="ionic/css/ionic.css">
            <script src="ionic/js/ionic.bundle.js"></script>
        </head>
        <body style="display: none;">
            <!--application UI goes here-->
            <div class="bar bar-header bar-positive">
                <h1 class="title">bar-positive</h1>
            </div>
            <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

我也在移动设备上测试了 Android 和 IOS，只在 IOS 设备上出错。

我不知道如何解决这个问题。任何人都可以帮忙吗？谢谢。

【问题讨论】：

至少你需要提供一个测试用例项目来展示这个问题...
对不起，我已经编辑了我的问题...

标签： ios ibm-mobilefirst ionic-framework

【解决方案1】：

5 月 28 日更新：这是一篇关于 Worklight 和 Ionic 的博客文章，其中包含完整的示例项目：http://mobileroly.blogspot.co.il/2014/04/using-angular-js-and-ionic-on-ibm.html

嗯，这似乎是 ionic 框架和 Worklight 之间的一些不兼容。
Worklight 不正式支持 ionic。

MBS 发送“ios - iphone”。
ionic 反过来不喜欢那样，因为有空格......

我不太清楚 ionic 期望在那里有什么，但您可以通过在 ionic.bundle.js 文件中找到此代码来克服错误：

for(var i = 0; i < ionic.Platform.platforms.length; i++) {
    document.body.classList.add('platform-' + ionic.Platform.platforms[i]);
}

并将其替换为以下内容。
错误将消失。

for(var i = 0; i < ionic.Platform.platforms.length; i++) {
    if (ionic.Platform.platforms[i] = "ios - iphone") {
       document.body.classList.add('platform-ios');  
       // or maybe 'platform-ready', I don't know...
    } else {
       document.body.classList.add('platform-' + ionic.Platform.platforms[i]);
    }
}

但是，这无助于在 MBS 中显示应用程序...
但至少你可以在 Xcode 的 iOS 模拟器中运行来查看应用程序。

似乎 ionic 和 Worklight 的 iPhone/iPad 环境不能很好地配合使用。

index.html：

<head>
    ...
    ...
    <link href="ionic/ionic.css" rel="stylesheet">
    <script src="ionic/ionic.bundle.js"></script>
</head>

<body ng-app="ionicApp">
    <div class="bar bar-header bar-positive">
        <h1 class="title">bar-positive</h1>
    </div>
    <div style="margin-top:38px">
        <p>test test test</p>
    </div>
    ...
    ...
</body>

main.js：

angular.module('ionicApp', ['ionic']);

【讨论】：