Question

我正在尝试将Angular 1.5网站移植到手机应用程序中。

它似乎在我的网络浏览器上工作得非常好，但在phonegap上，ui-view子视图不会显示。

有人知道为什么或如何解决这个问题？

这是包含我的phonegap应用的元数据的标题：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<!-- Good default declaration:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
    * Enable inline JS: add 'unsafe-inline' to default-src
    * Enable eval(): add 'unsafe-eval' to default-src
* Create your own at http://cspisawesome.com
-->
 <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" />-->

<!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->
<title>Exotic Vehicle Services</title>
<meta name="description" content="exotic car rental source" />
<meta name="keywords" content="rent exotic cars" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="libs/assets/animate.css/animate.css" type="text/css" />
<link rel="stylesheet" href="libs/assets/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="libs/assets/simple-line-icons/css/simple-line-icons.css" type="text/css" />
<link rel="stylesheet" href="libs/jquery/bootstrap/dist/css/bootstrap.css" type="text/css" />

<link rel="stylesheet" href="libs/jquery/jquery-timepicker-jt/jquery.timepicker.css" type="text/css" />

<!--<link href="//fonts.googleapis.com/css?family=Play" rel="stylesheet">-->
<!--<link href='//fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>-->

<!-- build:css css/app.min.css -->
<link rel="stylesheet" href="css/font.css" type="text/css" />
<link rel="stylesheet" href="css/app.css" type="text/css" />
<link rel="stylesheet" href="css/ngfader.css" type="text/css">
<!-- endbuild -->

</head>

这是我体内具有ui-view属性的主要div。

<div class="app" id="app" ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded, 'app-aside-dock':app.settings.asideDock, 'container':app.settings.container}" ui-view></div>

我的角度是手动引导onDeviceReady事件。它运行以下代码：

onDeviceReady: function() {
    console.log('Received Device Ready Event');
    console.log('calling setup push');
    //app.setupPush();
    angular.element(document).ready(function () {
        if (window.cordova) {
            console.log("Running in Cordova, will bootstrap AngularJS once 'deviceready' event fires.");
            document.addEventListener('deviceready', function () {
                console.log("Deviceready event has fired, bootstrapping AngularJS.");
                angular.bootstrap(document.body, ['app']);
            }, false);
        } else {
            console.log("Running in browser, bootstrapping AngularJS now.");
            angular.bootstrap(document.body, ['app']);
        }
    });
}

Phonegap ui-router ui-view不使用角度1

0 个答案: