IBM Worklight v6.1.0.1:在Worklight上使用Ionic Framework并在IOS环境中运行时出错

我用Worklight创build了Ionic的演示应用程序,它在Android上工作,但是在IOS上出现错误,当我使用手机浏览器模拟器并在IOS环境下debugging时,出现以下错误消息:

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的移动设备上进行了testing,并且只在IOS设备上出现错误。

我不知道如何解决这个问题。 谁能帮忙? 谢谢。

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


那么,这似乎是ionic framework和Worklight之间的一些不兼容。
Worklight不正式支持离子。

MBS发送“ios – iphone”。
离子反过来不喜欢,因为有空间…

我不太清楚离子期望在那里,但是你可以通过在ionic.bundle.js文件中find这个代码来克服这个错误:

 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中的应用程序…
但至less你可以运行在Xcode的iOS模拟器来查看应用程序。

看起来离子和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']); 

在这里输入图像说明