传递给 CameraCtrl 的 Camera 对象为空

Question

我正在尝试制作一个简单的应用程序来使用 phone 的相机。问题是传递给 CameraCtrl 的 Camera 对象是空的：

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

.controller('CameraCtrl', function($scope, Camera){
    $scope.pictureUrl = "http://lorempixel.com/400/200/";

    $scope.takePicture = function() {
        console.log('taking picture...');
        console.log(JSON.stringify(Camera));
        var options = {
            destinationType: Camera.DestinationType.DATA_URL,
            encodingType: Camera.EncodingType.JPEG
        };

        Camera.getPicture(options)
        .then(
            function(data){
                $scope.pictureUrl = "data:image/jpeg;base64," + data;
            },
            function(error){
            });
    };
})

当我按下 "Take Photo" 按钮时，我得到以下控制台日志：

0 347478 log taking picture... 1 347482 log {} 2 347507 error TypeError: Cannot read property 'DATA_URL' of undefined at Scope.$scope.takePicture (http://192.168.1.105:8100/js/controllers.js:11:52) at fn (eval at (http://192.168.1.105:8100/lib/ionic/js/ionic.bundle.js:26457:15), :4:224) at http://192.168.1.105:8100/lib/ionic/js/ionic.bundle.js:62386:9 at Scope.$eval (http://192.168.1.105:8100/lib/ionic/js/ionic.bundle.js:29158:28) at Scope.$apply (http://192.168.1.105:8100/lib/ionic/js/ionic.bundle.js:29257:23) at HTMLButtonElement. (http://192.168.1.105:8100/lib/ionic/js/ionic.bundle.js:62385:13) at HTMLButtonElement.eventHandler (http://192.168.1.105:8100/lib/ionic/js/ionic.bundle.js:16583:21) at triggerMouseEvent (http://192.168.1.105:8100/lib/ionic/js/ionic.bundle.js:2948:7) at tapClick (http://192.168.1.105:8100/lib/ionic/js/ionic.bundle.js:2937:3) at HTMLDocument.tapTouchEnd (http://192.168.1.105:8100/lib/ionic/js/ionic.bundle.js:3064:5)

这是我的 services.js 文件的内容：

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

.factory('BlankFactory', [function(){

}])

.factory('Camera', ['$q', function($q) {
   return {
            getPicture: function(options) {
            var q = $q.defer();
            navigator.camera.getPicture(function(result) {
                q.resolve(result);
            }, function(err) {
                q.reject(err);
            }, options);
            return q.promise;
        }
   };
}])

.service('BlankService', [function(){

}]);

controllers.js 文件的开头：

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

.controller('CameraCtrl', function($scope, Camera){
    $scope.pictureUrl = "http://lorempixel.com/400/200/";

    $scope.takePicture = function() {
        console.log('taking picture...');
        console.log(JSON.stringify(Camera));
        var options = {
            destinationType: Camera.DestinationType.DATA_URL,
            encodingType: Camera.EncodingType.JPEG
        };

        Camera.getPicture(options)
        .then(
            function(data){
                $scope.pictureUrl = "data:image/jpeg;base64," + data;
            },
            function(error){
            });
    };
})

app.js 文件：

angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.directives','app.services',])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
});

和 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>



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

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

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

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


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


    <style type="text/css">
      .platform-ios .manual-ios-statusbar-padding{
        padding-top:20px;
      }
      .manual-remove-top-padding{
        padding-top:0px; 
      }
      .manual-remove-top-padding .scroll{
        padding-top:0px !important;
      }
      ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
        margin-left:-10px;
        margin-right:-10px;
      }
      ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
        border-radius:0px;
        border-left:0px;
        border-right: 0px;
      }
    </style>

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/routes.js"></script>


    <script src="js/directives.js"></script>

    <script src="js/services.js"></script>


    <!-- Only required for Tab projects w/ pages in multiple tabs 
    <script src="lib/ionicuirouter/ionicUIRouter.js"></script>
    -->

  </head>
  <body ng-app="app" animation="slide-left-right-ios7">
  <div>
    <div>
        <ion-nav-bar class="bar-stable">
            <ion-nav-back-button></ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
    </div>
</div>
  </body>
</html>

Answer 1

看来你得重命名你的Camera factory，因为这个名字和插件有冲突。因此，由于在您的控制器中调用 Camera.DestinationType angular 认为您正在尝试调用名为 Camera

的工厂

传递给 CameraCtrl 的 Camera 对象为空

The Camera object passed to the CameraCtrl is empty

cordova

ionic-framework

cordova-plugins

ngcordova