使用Monaca IDE和Onsen的Angularjs“ TypeError：无法读取未定义的属性'getPicture'”

Question

I'm writing a mobile app in the Monaca IDE, using Angularjs. I'm trying to attach an image to a submit form (take picture, or include picture from file).

I have this error message

TypeError: Cannot read property 'getPicture' of undefined.

I can't seem to figure out why its saying 'getPicture' is undefined, where else in the project should I define this function?

Any suggestions on a working version? Thank you in advance

//My directive where getPicture() is called
<ons-button ng-click="getPicture()" />

//rebateFormCtrl Controller
.controller('rebateFormCtrl', function(rebate, $scope) {
    $scope.model = {};
    $scope.submit = function () {
        if ($scope.receipt == null) {
            ons.notification.alert({message: "Please attatch a picture of the receipt"});
        }
        rebate.submit($scope.model, $scope.receipt, function (err, rebate) {
            if (err) {
                angular.forEach(err, function (val, i) {
                    ons.notification.alert({title: i, message: val});
                });

            }
            else {
                console.log(rebate);
                $scope.rebates.current = rebate;
                $scope.myNavigator.pushPage('rebate.html');
            }
        });
    };
    $scope.getPicture = function () {
        navigator.camera.getPicture(
            function (imageData) {
                $scope.receipt = "data:image/jpeg;base64," + imageData;
            },
            function (msg) {
                console.log(msg);
            }
        );
    };
})

//rebate Factory
.factory("rebate", function ($http, Upload) {
    return {
        getById: function (id, callback) {
            $http.get(baseUrl + "rebates/" + id)
                .then(function (res) {
                    callback(null, res.data);
                },
                function (res) {
                    callback(res);
                });
        },
        submit: function (rebateData, receipt, callback) {
            var options = new FileUploadOptions();
            options.fileKey = "receipt";
            options.fileName = receipt.substr(receipt.lastIndexOf('/') + 1);
            options.mimeType = "image/jpeg";
            options.params = rebateData;

            var ft = new FileTransfer();
            ft.upload(receipt, encodeURI(baseUrl + 'rebates'),
                function (res) {
                  //success
                    console.log(JSON.stringify(res))
                    var rebate = JSON.parse(res.response);
                    callback(null, rebate);
                },
                function (res) {
                  //fail
                  console.log(JSON.stringify(res));
                  errors = JSON.parse(res.body);
                  callback(errors);
                }
            , options);
        }
    };
});

Answer 1

I'm assuming you're using Cordova and the Camera plugin, the error is telling you that the getPicture() method cannot be called on an undefined variable.

Which means that navigator.camera is not defined.

You can do a simple check like the following code to see if it's set or not.

if (typeof navigator.camera !== 'undefined') {
    //Execute your code here
}

If you are using ngCordova (or Ionic) they have a nice wrapper for this plugin and Angular http://ngcordova.com/docs/plugins/camera/