Undefined Items

[soniyj]

Using the plugin I've got this error.

Cannot read property 'length' of undefined at ionGalleryData.setGallery

It seems that the items passed to the ion-gallery-item are not set up correctly.

[pedroabreu]

Can you give me a sample dataset of what you're trying to pass in the ion-gallery-items ? Please confirm that you're setting the markup as ion-gallery-items and not ion-gallery-item

[soniyj]

Hello, uau super-fast :).

I've just copied the one from your example.

This is my html

<ion-gallery ion-gallery-items="items"></ion-galllery>

This is my data-set

$scope.items = [
  {
    src:'http://www.wired.com/images_blogs/rawfile/2013/11/offset_WaterHouseMarineImages_62652-2-660x440.jpg',
    sub: 'This is a <b>subtitle</b>'
  },
  {
    src:'http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg',
    sub: 'a' /* Not showed */
  },
  {
    src:'http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg',
    sub: 'a'
  }
];

[pedroabreu]

There's a typo on the closing tag (It will be fixed on the PR I'm working on) should be Not sure if it would fix it but I'll have a closer look at this later

[soniyj]

OK. Thanks.

[sykaeh]

I'm having the same problem.

[pedroabreu]

Are you guys using the latest version of the directive ? I can't seem to reproduce your issue.

What's the ionic/angular version ? What's the device ?

[sykaeh]

Just updated to ion-gallery version 0.1.7

Cordova CLI: 5.3.3 Gulp version: CLI version 3.9.0 Gulp local: Local version 3.9.0 Ionic Version: 1.1.0 Ionic CLI Version: 1.7.7 Ionic App Lib Version: 0.6.3 ios-deploy version: 1.8.2 ios-sim version: 5.0.1 OS: Mac OS X Yosemite Node Version: v4.1.2 Xcode version: Xcode 7.0.1 Build version 7A1001

The error shows up when I run ionic serve.

[soniyj]

I have just updated ion-gallery to 0.1.7 as well, when I open the page that calls the directive I get

Error: undefined is not an object (evaluating 'items.length')

setGallery@host/lib/ion-gallery/dist/ion-gallery.js:128:35
controller@host/lib/ion-gallery/dist/ion-gallery.js:25:32

below my ionic info

Cordova CLI: 5.1.1
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
Ionic Version: 1.0.1
Ionic CLI Version: 1.7.7
Ionic App Lib Version: 0.6.3
ios-deploy version: 1.7.0 
ios-sim version: 4.1.1 
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.1 Build version 7B60 

I'm just testing it with ionic serve.

[pedroabreu]

It might be some issue with ionic serve (Since it runs in the browser). I have to check that later.

Can any of you test on a device/simulator (http://ionicframework.com/docs/guide/testing.html) ?

[soniyj]

Yes. No problem I know how to test it on a real device, I will let you the results.

[soniyj]

Tested on my Android S4 mini android 4.2.2 and I have got the same error:

error    TypeError: Cannot read property 'length' of undefined

at ionGalleryData.setGallery (/lib/ion-gallery/dist/ion-gallery.js:128:35)
at new controller (/lib/ion-gallery/dist/ion-gallery.js:25:22)

[pedroabreu]

Can you show me the HTML where you are setting up the gallery ? Might be that it's creating an isolated scope which makes it unavailable to access the items in scope.

Put a breakpoint or print the scope on line 25 of the ion-gallery.js and show me what's on scope (actually just try to access the items property on the breakpoint by typing it on the console)

[soniyj]

How I said the HTML is the same from your example, I just put it into an Ionic Modal

<ion-modal-view>
  <ion-header-bar>
        <h1 class="title">Title</h1>
    <div class="buttons">
      <button class="button button-stable" ng-click="closeGallryModal()">
        Close
      </button>
    </div>
  </ion-header-bar>
    <ion-content>
    <ion-gallery ion-gallery-items="items"></ion-galllery>
    </ion-content>
</ion-modal-view>

This is the scope printed on line 25

$$childHead: null
$$childTail: null
$$destroyed: false
$$isolateBindings: Object
$$listenerCount: Object
$$listeners: Object
$$nextSibling: null
$$phase: null
$$prevSibling: null
$$watchers: null
$id: 52
$parent: ChildScope
$root: Scope
ionGalleryItems: undefined
ionGalleryRow: undefined

[pedroabreu]

Can you access $scope.items from there ? I think the ionic modal is somehow messing up with it by creating an isolated scope. This is my guess, I'll give it a go today.

[pedroabreu]

I've just been testing this and I can't reproduce it. The issue here is the items are not being passed to the directive. The directive creates an isolated scope so the issue (as I see it) is external to this. Can you share your project on codepen (Controller and HTML) ? When are you passing the items to scope ? Are you opening a modal via the ionic modal service ?

[soniyj]

I did other tests and it seems that this problem (in my case) appears only if the directive is inside an ionic-modal-view. In fact inside a normal ionic-view seems to work, I haven't tried on a device yet, but I will do and I will update consequently. Maybe your directive doesn't work well with ionic modal, because, during my tests, I've got a situation in which, the error (on length) is not shown, but the directive doesn't show any images.

[soniyj]

Tested on mobile as well. Directive works on a normal page but it doesn't into a modal view.

[pedroabreu]

Update your directive version. I've fixed some ionic modal issues.

I will have a closer look at this. Are you initialising the modal in a controller ?

Was there any conflict with the ionic version when you installed the directive using bower ? Just thinking that it could also be an issue in new ionic versions ...

[sykaeh]

I managed to resolve my issue. I was setting the $scope.items later to load asynchronously, i.e.

$scope.$on('$ionicView.enter', function(e) {
    $scope.items = [ ... ];
});

However, setting $scope.items = []; before that fixed the problem.

[pedroabreu]

Assuming it acts as a normal JavaScript event, it creates an isolated scope/closure. My guess is that the directive is initialized empty and then runs again (can you confirm that?) Why are you passing variables to scope on view entry ? On Mon, Oct 26, 2015 at 18:23 Sybil Ehrensberger notifications@github.com wrote:

I managed to resolve my issue. I was setting the $scope.items in

$scope.$on('$ionicView.enter', function(e) { $scope.items = [ ... ]; });

However, setting $scope.items = []; before that fixed the problem.

— Reply to this email directly or view it on GitHub https://github.com/pedroabreu/ion-gallery/issues/13#issuecomment-151236629 .

[soniyj]

I figured it out, as @sykaeh did, that if you define the items into a modal-function won't work and you will get the undefined error. But outside works perfectly.

However it doesn't work if the view is an ion-view-modal, namely there won't be any error, but the gallery isn't shown.

Below a snippet

/* Controller Begin */
$ionicModal.fromTemplateUrl('templates/test.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });

$scope.showGallery = function() {
    //$scope.items = [...]; // errors
    $scope.modal.show();
};

$scope.items = [...]; //No errors
/* Controller End */

<!-- Modal View doesn't show the gallery -->
<ion-modal-view>
  <ion-header-bar>
    <h1 class="title">My Modal</h1>
  </ion-header-bar>
  <ion-content>
    <ion-gallery ion-gallery-items="items"></ion-gallery>  
  </ion-content>
</ion-modal-view>

<!-- Ion View shows the gallery correctly -->
<ion-view view-title="Test">
  <ion-content>
    <h1>Test</h1>
    <ion-gallery ion-gallery-items="items"></ion-gallery> 
  </ion-content>
</ion-view>

[pedroabreu]

Try defining the $scope.items before initialising the modal. The issue is the scope items is not passed to the modal

[pedroabreu]

Solved

[soniyj]

OK. I will try, thanks for this plugin.