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

Question

我正在使用 Angularjs 在 Monaca IDE 中编写一个移动应用程序。我正在尝试将图像附加到提交表单（拍照，或包含文件中的图片）。

我有这个错误信息

TypeError：无法读取未定义的属性“getPicture”。

我似乎无法弄清楚为什么它说“getPicture”是未定义的，我应该在项目的其他什么地方定义这个函数？

对工作版本有什么建议吗？提前谢谢你

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

我假设您正在使用 Cordova 和 Camera 插件，错误是告诉您无法对未定义的变量调用 getPicture() 方法。

这意味着navigator.camera 没有定义。

您可以像下面的代码一样做一个简单的检查，看看它是否已设置。

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

如果您使用的是 ngCordova（或 Ionic），他们有一个很好的插件用于这个插件和 Angular http://ngcordova.com/docs/plugins/camera/