0
我一直在嘗試使用Worklight和AngularJS構建一個混合Web應用程序，並且遇到了在設備上工作的導航問題。 我有一個簡單的主屏幕，只有一個按鈕。一旦我點擊這個按鈕，它應該帶我到第2頁（serviceList頁面）。當我按下按鈕時，什麼都沒有發生。 其實我現在在頁面上有兩個按鈕，一個使用<a href>標籤，另一個使用ng-click="viewServiceTickets()"，在viewServiceTickets（）函數中我使用$location.path('serviceList');（也試過'/ serviceList'和'＃/ serviceList'，因爲有些人有一直在暗示）但無濟於事。如何在Worklight中使用angularjs路由？
如果我運行它：
- 在預覽模式下 - 它的工作原理
- 在移動瀏覽器模擬器 - 它的工作原理
- 在iPhone模擬器 - 它的工作原理
- 在iOS設備上 - IT故障（即當我按下按鈕或
<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();
};
};
我看了，並嘗試許多建議已不出現爲我工作：
- Angular ng-view/routing not working in PhoneGap
- angular.js doesn't work ng-view tag in PhoneGap
- angular ng-view phonegap is not working
我忘了補充我的主要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>
我在工作燈工作室6.1運行和angularjs 1.2.13
任何想法？我確信（希望）我做過/沒有做過的事情是愚蠢的。
IMO的問題標題是誤導。這個問題與AngularJS無關。它是關於在基於Worklight的應用程序中的頁面之間導航的。 –
@Idan：並不像AngularJS有處理單頁面應用程序的機制，這正是我想要做的。我嘗試了默認機制，它可以在設備上運行。因此，處理SPA的AnglularJS模型可能與WL不兼容。我希望在不使用任何JQuery功能的情況下做到這一點，但這可能是不可能的。我會使用std方法去看看它，看看如何整合Angular。 –
此外，我知道iOS模擬器和設備之間存在差異，但我也很好奇它爲什麼只在設備上失敗。 –