如何从设备中选择多个图像?

时间:2015-06-03 15:52:09

标签: angularjs cordova ionic-framework ngcordova

如果我创建一个简单的项目:

ionic start MyApp

添加ImagePicker插件:

ionic plugin add https://github.com/wymsee/cordova-imagePicker.git -save

只需将this example www folder复制到项目中即可:

ionic platform add android
ionic build android
ionic run android

一切都很好。我可以按预期选择多个图像而不会出现任何错误。

到目前为止一切顺利。现在我尝试将其包含到我的项目中,所以我添加了ImagePicker插件。现在这是我的插件列表:

ionic plugin ls
com.synconset.imagepicker 1.0.6 "ImagePicker"
cordova-plugin-camera 1.1.0 "Camera"
cordova-plugin-device 1.0.0 "Device"
cordova-plugin-dialogs 1.1.0 "Notification"
cordova-plugin-splashscreen 2.0.0 "Splashscreen"
cordova-plugin-statusbar 1.0.0 "StatusBar"
cordova-plugin-vibration 1.1.0 "Vibration"
cordova-plugin-whitelist 1.0.0 "Whitelist"

我创建了一个新模块:

angular.module('App.ImageSelect', [])

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app.imageSelect', {
        url: "/products/prints/pola/imageSelect",
        views: {
            'menuContent': {
                templateUrl: "modules/products/prints/pola/imageSelect/imageSelect.html",
                controller: 'ImageSelectController'
            }
        }
    });
})

.controller('ImageSelectController', function ($scope, $cordovaImagePicker) {
    $scope.images = [];

    $scope.selectImages = function () {
        $cordovaImagePicker.getPictures(
            function (results) {
                for (var i = 0; i < results.length; i++) {
                    console.log('Image URI: ' + results[i]);

                    $scope.images.push(results[i]);
                }

                if (!$scope.$$phase) {
                    $scope.$apply();
                }
            },
            function (error) {
                console.log('Error: ' + error);
            }
        );
    };
});

正如您所看到的那样,它是我从here复制的SAME控制器,它完成了简单的测试项目。

对于任何可疑的原因,这是行不通的。我总是得到错误:

TypeError: Cannot read property 'getPictures' of undefined

那么重点是什么?我在两个项目中使用EXACT相同的代码。在一个方面,一切都在发挥作用,而在另一个方面,没有任我尝试了here所描述的所有例子,但它总是一样的。

2 个答案:

答案 0 :(得分:5)

我检查了您的项目,而您的index.html缺少cordova.js。因此,没有任何插件被加载或初始化。 只需在您加载ng-cordova.js的下方index.html中添加以下行。

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

答案 1 :(得分:0)

在你举例中,你正在注射$cordovaCamera,但标志性的使用$cordovaImagePicker。此外,在您的示例中,您使用imagePicker对象中的对象window。我不是window对象就是你想要的。

尝试注入正确的依赖项$cordovaImagePicker并改为使用方法$cordovaImagePicker.getPictures