我一直在尝试使用Worklight和AngularJS构建一个混合Web应用程序，但是我无法使导航在设备上正常工作。我有一个带有一个按钮的简单主屏幕。单击此按钮后，它将带我到第2页（serviceList页）。当我按下按钮时，什么也没有发生。实际上，我现在在页面上有两个按钮，一个使用<a href>标记，另一个使用ng-click="viewServiceTickets()"和在viewServiceTickets（）函数中，我使用$location.path('serviceList');（也有人尝试过尝试使用'/ serviceList'和'＃/ serviceList'），但是无济于事。
如果我运行它：
<a href，什么也没有发生，并且我在日志中没有看到任何错误。我的角度配置看起来像这样
var serviceApp = angular.module('serviceApp', ['ngRoute', 'ngTouch']);
var serviceControllers = {};
serviceApp.controller(serviceControllers);
serviceApp.config(function ($compileProvider){
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
//This configures the routes and associates each route with a view and a controller
serviceApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'HomePageController',
templateUrl: 'views/HomePage/homePage.html'
})
.when('/serviceList',
{
controller: 'ServiceTicketListController',
templateUrl: 'views/ServiceTicketList/serviceTicketList.html'
})
.otherwise({ redirectTo: '/' });
});
我的main.js文件有
function wlCommonInit(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady() {
angular.bootstrap(document);
}
主页非常简单
<div id="splashPage">
<div>
<h2>Service Ticket Viewer</h2>
<button type="button" data-ng-click="viewServiceTickets()">View Service Tickets</button>
<div class="mainBtnContainer">
<a href="#/serviceList" >
<img src="images/technical-support.png">
</a>
</div>
</div>
</div>
最后我的控制器是
serviceControllers.HomePageController = function ($scope, $location, $window, TicketService) {
$scope.currentServiceTicket = {};
init();
function init() {
console.log("Initialisation of HomePageController complete");
}
$scope.viewServiceTickets = function() {
//$locationProvider.html5Mode(true);
$location.path("/serviceList");
};
$scope.goBack = function() {
console.log("Going Back");
$window.history.back();
};
};
我已经查看并尝试了一些建议，这些建议似乎对我不起作用：
我忘了添加我的主要index.html页面。所有页面片段都使用data-ng-view指令注入div中。
<!DOCTYPE HTML>
<html data-ng-app="serviceApp">
<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">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<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">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="js/angularjs/angular.js"></script>
<script src="js/angularjs/angular-touch.js"></script>
<script src="js/angularjs/angular-route.js"></script>
<script src="js/angularjs/angular-animate.js"></script>
</head>
<body style="display: none;">
<div>
<div data-ng-view=""></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<script src="js/router.js"></script>
<!-- Controllers -->
<script src="views/HomePage/homePageController.js"></script>
<script src="views/ServiceTicketList/serviceTicketListController.js"></script>
<script src="views/ServiceTicketDetails/serviceTicketDetailsController.js"></script>
<!-- Services -->
<script src="js/models/serviceTickets.js"></script>
</body>
</html>
我在Worklight Studio 6.1和angularjs 1.2.13中运行
有任何想法吗？我确定（希望）我做过/还没有做过的事很愚蠢。
h！实际上是愚蠢的错误。知道它必须很简单。
由于日志中未显示任何错误，我花了一些时间进行跟踪。我连接了Safari Web检测器，却什么也没看见。然后，我使用了调试器并在“所有异常”上设置了一个断点，然后看到了错误“找不到文件”
问题是Web和iOS模拟器对文件名不区分大小写，而设备对大小写敏感。因此，文件名中只有一个错字。
对我来说这是个好消息，因为Angular是一种管理双向数据绑定以及SPA中路由的好方法，并且可以与Worklight很好地协同工作，而无需JQuery / Dojo等。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句