CODEWITHSUNDEEP
angularjsionic-framework
Blaze
Blaze

Reputation: 2329

Ionic: Selecting Image from the Gallery not behaving correctly

I have a code that browses the file system and selects image from the gallery using ionic and angularjs. My present challenge is that the image displays when selected and sometimes it does not display when selected. Everything seems okay from my end as I have checked to make sure that all the plugins and dependencies are utilized. Below is my source code and will be glad if you can help: This is my controllers.js code:::

angular.module('appControllers', [])

.controller('HomeCtrl', ['$scope', '$rootScope', '$cordovaCamera', function($scope, $rootScope, $cordovaCamera) {

    $scope.ready = false;
    $scope.images = [];

    $rootScope.$watch('appReady.status', function() {
        console.log('watch fired '+$rootScope.appReady.status);
        if($rootScope.appReady.status) $scope.ready = true;
    });

    $scope.selImages = function() {

        var options = {
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
            targetWidth: 200,
            correctOrientation: true,
            targetHeight: 200

        };

        $cordovaCamera.getPicture(options).then(function(imageUri) {
            console.log('img', imageUri);
            $scope.images.push(imageUri);

        }, function(err) {
        // error
        });

    };

}])

This is my app.js code:

.run(function($rootScope,$ionicPlatform) {
    $rootScope.appReady = {status:false};

    $ionicPlatform.ready(function() {
        console.log('ionic Ready');
        $rootScope.appReady.status = true;
        $rootScope.$apply();
        console.log('in app.js, appReady is '+$rootScope.appReady.status);
//      if(window.cordova && window.cordova.plugins.Keyboard) {
//          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
//      }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});

Upvotes: 0

Views: 187

Answers (2)

Vishnu Kumar Soni
Vishnu Kumar Soni

Reputation: 269

For selecting one or more images you can use "ImagePicker Plugin". In this plugin you can set how many images you want to select and at my end it is working properly. https://github.com/wymsee/cordova-imagePicker. Example->

window.imagePicker.getPictures(
function(results) {
    for (var i = 0; i < results.length; i++) {
        console.log('Image URI: ' + results[i]);
    }
}, function (error) {
    console.log('Error: ' + error);
} );

Example - Get at most 10 images scaled to width of 800:

window.imagePicker.getPictures(
function(results) {
    for (var i = 0; i < results.length; i++) {
        console.log('Image URI: ' + results[i]);
    }
}, function (error) {
    console.log('Error: ' + error);
}, {
    maximumImagesCount: 10,
    width: 800
} );

Upvotes: 1

Blaze
Blaze

Reputation: 2329

I was able to solve my problem by using $scope.$apply(); function

Upvotes: 0

Related Questions