Question

我正在为android开发移动应用。为此我使用JBoss Developer Studio，因为我需要访问应用程序的文件系统。我还需要org.apache.cordova.file插件。现在，如果我想用CordovaSim测试应用程序，那么我得到以下日志输出：

!JavaScript ERROR: SyntaxError: Unexpected token '?' on line 2 for http://localhost:59800/plugins/cordova-plugin-file/www/FileWriter.js 
!JavaScript ERROR: Error: Module cordova-plugin-file.FileWriter does not exist. on line 1371 for http://localhost:59800/ripple/cordova/cordova-3.5.0.js 
!JavaScript ERROR: 'undefined' is not an object (evaluating 'navigator.camera.getPicture')
http://localhost:59800/js/services.js:9 

(SWT:6181): GLib-CRITICAL **: Source ID 1285 was not found when attempting to remove it
!JavaScript ERROR: 'undefined' is not an object (evaluating 'navigator.camera.getPicture')
http://localhost:59800/js/services.js:9 

(SWT:6181): GLib-CRITICAL **: Source ID 1457 was not found when attempting to remove it
!JavaScript LOG: deviceready has not fired after 5 seconds. 
!JavaScript LOG: Channel not fired: onPluginsReady 
!JavaScript LOG: Channel not fired: onCordovaReady

我该怎么办？

我的service.js：

angular.module('starter.services', [])

.factory('Camera', ['$q', function($q) {

  return {
    getPicture: function(options) {
      var q = $q.defer();

      navigator.camera.getPicture(function(result) {
        // Do any magic you need
        q.resolve(result);
      }, function(err) {
        q.reject(err);
      }, options);

      return q.promise;
    }
  }
}])

我的index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
     <script src="js/ng-cordova-oauth.min.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/ngStorage.min.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter" ng-controller="MainCtrl">
    <ion-header-bar>
      <h1 class="title">Photos</h1>
    </ion-header-bar>
    <ion-content padding="true">
      <button ng-click="getPhoto()" class="button button-block button-primary">Take Photo</button>
      <img ng-src="{{lastPhoto}}" style="max-width: 100%">
    </ion-content>
  </body>
</html>

我的app.js：

var facebookExample = angular.module('starter', ['ionic', 'ngStorage', 'ngCordova','starter.services'])

    facebookExample.config(function($compileProvider){
          $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
        })

        facebookExample.run(function($ionicPlatform) {
          $ionicPlatform.ready(function() {
            if(window.StatusBar) {
              // org.apache.cordova.statusbar required
              StatusBar.styleDefault();
            }
          });
        })

        facebookExample.controller('MainCtrl', function($scope, Camera) {

          $scope.getPhoto = function() {
            Camera.getPicture().then(function(imageURI) {
              console.log(imageURI);
              $scope.lastPhoto = imageURI;
            }, function(err) {
              console.err(err);
            }, {
              quality: 75,
              targetWidth: 320,
              targetHeight: 320,
              saveToPhotoAlbum: false
            });
          };

        })

Answer 1

尝试将cordova.js脚本置于与cordova相关的脚本之上：

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/ng-cordova-oauth.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="js/ngStorage.min.js"></script>

为什么在ngCordova已经提供相同内容时，您自己编写Camera factory？你已经在使用它，所以你可以试试这个：

facebookExample.controller('MainCtrl', function($scope, $cordovaCamera) {

  // Put your cordova related code after the deviceready event
  document.addEventListener("deviceready", function () {

    var options = {
      quality: 75,
      targetWidth: 320,
      targetHeight: 320,
      saveToPhotoAlbum: false
    };

    $cordovaCamera.getPicture(options).then(function(imageData) {
      console.log(imageData);
      $scope.lastPhoto = imageData;
    }, function(err) {
      console.log(err);
    });

  }, false);

});

如何用angularjs ionic cordova相机打开图片库？

1 个答案: