使用 ngCordova 插件而不在 app.js 中调用它们？答案

【问题标题】：Using ngCordova plugins without calling them in app.js?使用 ngCordova 插件而不在 app.js 中调用它们？
【发布时间】：2015-07-08 16:36:27
【问题描述】：

感谢 Ionic，我的应用看起来不错。所有的核心信息都在那里，我只是添加了一些装饰——电子邮件、共享、媒体（其中一个功能是节拍器）等等。

我无法使用任何插件。

我在以前的 Ionic 应用程序上取得了成功，但插件都是从内部调用的

.run(function($ionicPlatform) {
   $ionicPlatform.ready(function() {
   }
}

确实，状态栏插件似乎工作正常，它是从那里调用的。

我正在使用带有内置选项卡的侧边菜单启动器。

我想我的问题是我有三个控制器文件。 main_ctrls.js - 用于主应用程序 menu_ctrls.js - 用于菜单页面，如反馈和电子邮件、分析 extras_ctrls.js - 用于带有节拍器等的“额外”部分。

我已将 'ngCordova' 作为每个模块的依赖项，并使用 ready 函数从控制器内调用插件。这是电子邮件控制器。

angular.module('menu.controllers', ['ngCordova'])

.controller('FeedCtrl', function($ionicPlatform, $scope, $cordovaEmailComposer) {

  $ionicPlatform.ready(function() {

    $cordovaEmailComposer.isAvailable().then(function() {
      // is available
      alert('Email is available');
    }, function () {
      // not available
      alert('Email is NOT available');
    });

    var email = {
      to: 'max@mustermann.de',
      cc: 'erika@mustermann.de',
      bcc: ['john@doe.com', 'jane@doe.com'],
      attachments: [
        'file://img/logo.png',
        'res://icon.png',
        'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',
        'file://README.pdf'
      ],
      subject: 'Cordova Icons',
      body: 'How are you? Nice greetings from Leipzig',
      isHtml: true
    };

    $cordovaEmailComposer.open(email).then(null, function () {
      alert('Email discarded.');
    });
  })
});

我正在使用 Chrome 检查在 Android（带有 Android 5.1 的 Nexus 4）上对其进行测试，但我收到一条错误消息，提示“无法读取未定义的属性 'isAvailable'”。不用说，警报不会弹出。

以这种方式从控制器内调用的所有插件都会发生这种情况。

我做错了什么？

【问题讨论】：

这可能会有所帮助。 raymondcamden.com/2014/08/16/…
我可以尝试一下，但这似乎没有必要，因为插件不需要在应用程序启动后立即准备好。

标签： angularjs cordova plugins ionic-framework ngcordova

【解决方案1】：

您似乎在触发 cordova 设备就绪之前调用插件。在我的 angularjs 应用程序中，我完成了以下操作。 1. 从 html 中移除 ng-app 并通过脚本进行手动引导 2. 将cordova.js 文件添加到依赖项中。（作为最后一个依赖。在 ng-cordova js 之后） 3.将cordova.js和index.html放在同一个文件夹下。（没有解释为什么。从任何其他位置，根本没有添加它。可能与科尔多瓦有关。） 4.在index.html中添加如下脚本

<script type="text/javascript" language="text/javascript"> 
$(document).ready(function() {
    document.addEventListener("deviceready", onDeviceReady, false);
}); 

onDeviceReady = function() {
    alert("hello!"); 
    angular.element(document).ready(function() {
    angular.bootstrap(document, ["main"]);
});
};
</script>

这里的“main”是我的主要 angularjs 模块。这确保了只有在cordova触发设备就绪事件并且所有与cordova相关的功能都可用之后才加载应用程序。具体到离子我没有任何代码。可能是离子引导应用程序的部分，而不是 angular.bootstrap。

我的假设：您已通过命令将插件添加到您的 cordova 项目中

cordova plugin add <plugin-location>

【讨论】：

是的，我已经在命令行中添加了插件并检查了它们是否已安装。我实际上正在准备一个设备，只是一个离子设备，而不是（文档）.ready。这是根据 ngCordova 的文档。
cordova.js 文件怎么样？你添加了吗？一些将添加 deviceready 事件的地方。你必须检查它是否被解雇。
是的，已添加。没有它就没有它，它几乎可以工作。
你能不能试着把它包装在 document.addEventListener('deviceready', function () {});
我在 ready 函数中设置了一个警告，当你进入页面时它会触发，但是插件不起作用:(

【解决方案2】：

index.html ng-cordova include 可以，如果您可以在 app.js 中使用 ngCrdova 插件，我认为 ng-cordova 在角度依赖项中注入不好。试试这个：

app.js
controllers.js

将 ng-cordova 添加到项目涉及调整模块定义文件，例如：

app.js

angular.module('startapp', ['ionic','ngCordova','startapp.controllers'])

controllers.js

  angular.module('startapp.controllers', [])

    .controller('AppCtrl', function($scope,$cordovaEmailComposer) {

       var email = {
    to: 'max@mustermann.de',
    cc: 'erika@mustermann.de',
    bcc: ['john@doe.com', 'jane@doe.com'],
    attachments: [
      'file://img/logo.png',
      'res://icon.png',
      'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',
      'file://README.pdf'
    ],
    subject: 'Cordova Icons',
    body: 'How are you? Nice greetings from Leipzig',
    isHtml: true
  };

 $cordovaEmailComposer.open(email).then(null, function () {
   // user cancelled email
 });

    })

只在 app.js 应用定义中包含 ngCordova。

【讨论】：