使用ngCordova插件而不在app.js中调用它们?

时间:2015-04-29 11:52:53

标签: angularjs cordova plugins ionic-framework ngcordova

我的应用程序看起来很好,感谢Ionic。所有核心信息都在那里,我只是添加了褶边 - 电子邮件,共享,媒体(其中一个功能是节拍器)等等。

我无法使用任何插件。

我使用之前的Ionic应用程序取得了成功,但插件都是从

中调用的
.run(function($ionicPlatform) {
   $ionicPlatform.ready(function() {
   }
}

实际上Statusbar插件似乎工作正常,并且从那里调用它。

我正在使用侧面菜单启动器和btw内置的选项卡。

我想,我的问题是我有三个控制器文件。 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(Nexus 4 with Android 5.1)进行测试,我只是收到错误消息“无法读取属性'isAvailable'未定义”。不用说,警报不会弹出。

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

我做错了什么?

2 个答案:

答案 0 :(得分:0)

好像你在启动cordova设备之前调用插件。在我的angularjs应用程序中,我做了以下操作。 1.从html中删除ng-app并通过脚本进行手动引导 2.将cordova.js文件添加到依赖项。 (作为最后的依赖。在ng-cordova js之后) 3.将cordova.js放在与index.html相同的文件夹中。 (没有解释为什么。从任何其他位置,只是它没有被添加。可能是与cordova有关的东西。) 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相关的功能可用后才加载应用程序。具体到离子我没有任何代码。可能是应用程序可以放置离子bootstraps的部分,而不是angular.bootstrap。

我的假设:您已通过命令

将插件添加到您的cordova项目中
cordova plugin add <plugin-location>

答案 1 :(得分:0)

如果你可以在app.js中使用ngCrdova插件,那么

index.html ng-cordova include是可以的,我认为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 app定义中包含ngCordova。