Error with empty array

[alconesp]

Hi,

I am having errors if I start with an empty array.

My app begins with an empty array and them I add photos using the camera. If I start with a few photos in the array at the begining, same number than ion-gallery-row or more, everything works fine but if I let the array empty, I can not add photos later.

If I insert only one photo, the columns does not fit well, the image fill the screen like the new images added.

[pedroabreu]

Are you using the latest version ? Are you passing an empty array to the directive at startup ? That issues was fixed a couple of versions ago.

Didn't get that last part of the columns, can you do a screenshot of the issue ?

[alconesp]

I am using the versión 0.1.10. At startup, I am passing an empty array that I fill in later with a factory.

This photo shows what happen if I pass an array with just one photo and, after a few seconds, push another.

This two images show what happen if I insert more than one photo at the beginning. As you can see, in all that three images, there is one photo in a second row. This photo has been inserted using $timeout.

I do not know if this is the normal behavior or, with row_size = 5, the last image is the right one.

[ggoforth]

I'm having the same issue with a version downloaded last night. Workflow is the same in my case, start with no images, add some via camera, in all cases I've tested the image that I just took isn't shown until after I refresh that view (IE navigate away and then come back). Doing some more digging and hopefully a better reproduce plan shortly.

[pedroabreu]

What ionic version are you using ?

[ggoforth]

Whatever is most recent. Out of pocket at the moment but will confirm when I get home.

[ggoforth]

My ionic version is 1.7.12

[ggoforth]

I think the issue here is around this code below (the ion-gallery controller):

Initially, $scope.ionGalleryRowSize is set to 0 when there are no items in the ionGalleryItems. This is done by ionGalleryHelper.getRowSize. Then draw gallery gets called when new items are added to the list, and _drawGallery is called again. The real issue is that $scope.ionGalleryRowSize isn't getting reset when calling _drawGallery. Moving the first two lines in the controller into the _drawGallery function fixes the issue.

function controller($scope){
      //Should these two lines be moved inside _drawGallery?
      $scope.ionGalleryRowSize = ionGalleryHelper.getRowSize(parseInt($scope.ionGalleryRowSize) || ionGalleryConfig.row_size, $scope.ionGalleryItems.length);
      $scope.actionLabel = ionGalleryConfig.action_label;

      var _drawGallery = function(){
        $scope.items = ionGalleryHelper.buildGallery($scope.ionGalleryItems,$scope.ionGalleryRowSize);
        $scope.responsiveGrid = parseInt((1/$scope.ionGalleryRowSize)* 100);
      };

      _drawGallery();

      (function () {
        $scope.$watch(function () {
          return $scope.ionGalleryItems.length;
        }, function (newVal, oldVal) {
          if(newVal !== oldVal){
            _drawGallery();

          }
        });
      }());

    }

[mayson14]

I am filling the gallery from a database. If i have a single image in the query the gallery does not load. if i have more than one image in the query, everything works fine. any ideas? Im not sure if its related to this issue or not.

[ggoforth]

@pedroabreu any chance of taking a look at the PR? https://github.com/pedroabreu/ion-gallery/pull/31

[pedroabreu]

@ggoforth sorry, I'll have a look today or tomorrow (crazy couple of weeks)

[troyshu]

@ggoforth @alconesp I'm sorry if this isn't the right place to post, but since you brought it up: how are you guys starting with an empty array (no images), and then adding photos (e.g. with the camera)? I have the camera part down, but when I try something like

app.controller('ACtrl', function($scope) {
  $scope.images = [];
  $scope.buttonClicked = function() {
    $scope.images.push({src: "[image path]"});
  };
});

I get the javascript error

Error: Attempted to assign to readonly property.
buildGallery@file:///var/mobile/Containers/Bundle/Application/A5D6027C-5133-45E5-97C0-B5AA36094440/wl.app/www/lib/ion-gallery/dist/ion-gallery.min.js:1:1433
...

so wondering how you guys were to dynamically add images to the gallery successfully (@alconesp you mentioned you used a factory?). I'm a very big angular newb. Thanks!

[troyshu]

Nevermind, stepping through ion-gallery.js in Safari debugger shows that my error is caused by the same root issue for what @alconesp originally noticed, which is solved by @ggoforth's fix (and I didn't read one of his comments carefully enough). Thanks @ggoforth for fixing, and @pedroabreu for merging, and the awesome plugin!

[pedroabreu]

Fixed with #31