科尔多瓦和角度：插件不起作用答案

【问题标题】：cordova and angular: plugins not working科尔多瓦和角度：插件不起作用
【发布时间】：2016-07-18 17:07:48
【问题描述】：

我是 Angular 和 Cordova 的新手。我正在使用 Cordova 6.2 和 angular 1.5.6。如果我创建一个新的cordova项目，我可以让插件工作，但我不能在我的角度应用程序中。当我不得不在 IOS 系统中设置 StatusBarOverlaysWebView = false 并且无法使其工作（在 iphone 5s、iphone 6 和模拟器中）时，我的问题就出现了。我尝试使用其他插件，但没有一个不起作用。我用谷歌搜索，发现问题可能是在加载 angular 后调用插件，并且我需要手动引导 angular 以使插件工作（在应用程序/设备准备好后调用它们）。我按照说明做了很多尝试，但我无法完成这项工作。我什至无法从新的cordova项目的cordova设备就绪基础示例中触发设备就绪事件复制代码的控制台日志。

在 IOS 上什至无法获得状态栏、启动画面。

也许我只是错过了一件小姐的事情。

这是我的代码，谢谢！

myApp.js

window.addEventListener('deviceready', function onDeviceReady() {
    //Never fired!!!!!!
    console.log("readydevice");
    StatusBar.overlaysWebView(false);
    angular.bootstrap(document, ['myApp']);
    StatusBar.overlaysWebView(false);

}, false);

window.addEventListener('DOMContentLoaded', function onDeviceReady() {
    //Fired but console returns: StatusBar is not defined 
    console.log("readyDom");
    StatusBar.overlaysWebView(false);
    angular.bootstrap(document.body, ['myApp']);
    StatusBar.overlaysWebView(false);

}, false);



angular.module('myApp', [
    'ngRoute',
    'mobile-angular-ui',
    'ngSanitize'
]);

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
    <title>My app</title>
    <link rel="stylesheet" href="dist/css/mobile-angular-ui-base.min.css"/>
    <link rel="stylesheet" href="dist/css/general.css"/>
    <link rel="stylesheet" href="dist/css/custom.css"/>
    <script src="dist/js/winstore-jscompat.js"></script>
    <script src="dist/js/angular.min.js"></script>
    <script src="dist/js/angular-route.min.js"></script>
    <script src="dist/js/angular-sanitize.min.js"></script>
    <script src="dist/js/mobile-angular-ui.min.js"></script>
    <script src="dist/js/mobile-angular-ui.gestures.min.js"></script>
    <script src="javascript/config.js"></script>

</head>
<body ng-csp="">

<div class="app">
    <top-bar></top-bar>

    <div class="app-body">
        <div ng-view class="app-content scrollable-content"></div>
    </div>

    <menu-bottom></menu-bottom>

</div>

<script src="javascript/myApp.js"></script>
<script src="javascript/controllers/route.js"></script>
<script src="javascript/controllers/controller.js"></script>
<script src="javascript/directives/directive.js"></script>
</body>
</html>

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.com" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>My App</name>
    <description>
        My App
    </description>
    <author email="develop@example.com" href="http://www.example.com">
        My Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <access launch-external="yes" origin="tel:*" />
    <access launch-external="yes" origin="mailto:*" />
    <engine name="ios" spec="~4.1.1" />
    <engine name="android" spec="~5.1.1" />
    <engine name="windows" spec="~4.3.2" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="splashscreen" value="splash" />
    <preference name="SplashScreenDelay" value="1000" />
    <preference name="Fullscreen" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="Orientation" value="portrait" />
    <preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="#000000" />
    <preference name="StatusBarStyle" value="default" />
    <platform name="android">
        <allow-intent href="market:*" />
        <!--<splash density="land-hdpi" src="res/images/splash.png" />-->
        <!--<splash density="port-hdpi" src="res/images/splash.png" />-->
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <preference name="SuppressesIncrementalRendering" value="true" />
        <!--<splash src="res/images/ios/Default~iphone.png" width="320" height="480"/>-->
        <!--<splash src="res/images/ios/Default@2x~iphone.png" width="640" height="960"/>-->
    </platform>
    <icon src="res/images/icon.png" />

</widget>

【问题讨论】：

你是如何设置你的项目的？看来你没有包括类似<script type="text/javascript" src="cordova.js"></script>....的cordova
我今天也有同样的疑问。如果我记录 window.cordova 总是得到空值。我按照官方网站cordova.apache.org/docs/en/latest/guide/cli 上的指南通过cordova cli 设置我还尝试在www 下添加脚本，但没有得到任何结果。如果我进入平台构建 apk/appx/ipa，我会看到 cordova js。我究竟做错了什么？谢谢！
嗯，如果我使用 cli (v 6.2.0) 设置了一个新项目，我可以清楚地看到 index.html 中对 cordova.js 的引用......也许重试创建你的项目，如果那样的话失败我建议更新cordova。
该死的人，我只是为了cordova.js而苦苦挣扎。我删除以避免浏览器控制台错误并完全忘记添加它。谢谢！
很高兴你明白了 ;)

标签： android ios angularjs cordova

【解决方案1】：

我只需要添加：

<script type="text/javascript" src="cordova.js"></script>

在 index.html 中。

【讨论】：