Plugin not working with ionic app

[nitesh3691]

I am using the carousel in ionic modal. Referred steps from your readme file but while running the app it is giving following errors in console:

1) undefined is not an object (evaluating parsed.protocol)

2) Failed to load the template: undefined

Thanks

[sebelga]

Hello, Could you post some code on how you are implementing it? (both in html and in ctrl) Also remember to pass "carousel-options" as Object and "array-provider" as Array from your Controller.

[nitesh3691]

Hi,

I have installed your plugin using bower and have injected the aCarousel in the app.js file.

I want to use it in ionic modal in my mobile app.

Tried using on simple html but still far no luck.

This is my controller:

'use strict'; angular.module('ionicControllers') .controller('demoController', ['$scope', '$timeout', '$ionicModal', function($scope, $timeout, $ionicModal) {

        var vm = this;

        vm.options = {
            unselectOthers: false
        };

        var modal;

        // Carousel Options
        vm.carouselOptions1 = {
            carouselId: 'carousel-1',
            align: 'left',
            selectFirst: true,
            centerOnSelect: true
        };

        $scope.carouselOptions1 = vm.carouselOptions1;

        $scope.carouselData1 = [{id: 1, display: '1'},{id: 2, display: '2'}];

        function openModal() {
            var templateModal = '<ion-modal-view><ion-header-bar><h2>Inside a Modal</h2></ion-header-bar>' +
                '<ion-content><button class="btn" ng-click="closeModal()">Close modal</button><br><a-carousel item-directive="carousel-text-item" ' +
                'carousel-options="carouselOptions1" array-provider="carouselData1" ' +
                'on-select="onSelectCarousel(item)"></a-carousel></ion-content></ion-modal-view>';
            modal = $ionicModal.fromTemplate(templateModal, {
                scope: $scope
            });
            modal.show();
        }

        vm.openModal = openModal;

        function closeModal() {
            modal.hide();
        }
        $scope.closeModal = closeModal;

        function activate() {

            // To be able to use the carousel inside a modal we need to set the properties on the $scope object
            //$scope.carouselOptions1 = vm.carouselOptions1;
            $scope.carouselData1 = vm.carouselData1;
            //$scope.onSelectCarousel = vm.onSelectCarousel;
            //$scope.closeModal = closeModal;

            function createArray(total, randomImg) {
                var i, model, imgId, arr = [];
                for (i = 0; i < total; i++) {
                    model = {
                        id: i,
                        display: 'item ' + i
                    };
                    if (i === 2 || i === 13) {
                        model.display = 'longer ' + model.display;
                    }
                    arr.push(model);
                }

                return arr;
            }

            // Mock data for carousel
            vm.carouselData1 = createArray(20);
            $scope.carouselData1 = vm.carouselData1;
        }

        function onSelectCarousel(item) {
            console.log('Carousel item selected:', item);
            vm.itemSelected = item;

            // unselect all carousel with id that contains string except one
            if (vm.options.unselectOthers) {
                $scope.$broadcast('a-carousel.desactivateItem', {
                    idContains: 'carousel-',
                    except: item.carouselId
                });
            }
        }

        vm.onSelectCarousel = onSelectCarousel;
        $scope.onSelectCarousel = vm.onSelectCarousel;

        activate();

    }
]);

[nitesh3691]

[sebelga]

I don't see that you call the method activate() at the top of your controller. You have to call activate(); (https://github.com/sebelga/ionic-advanced-carousel/blob/master/demo/www/js/main.controller.js#L80) to create the data ($scope.carouselData1).

Try it and tell me if it worked.

[nitesh3691]

I have called method activate() at the end of the controller

[sebelga]

Sorry I just saw that you call it down below. Try to put this in your Controller:

(function () {
    'use strict';

    angular.module('ionicControllers')
        .controller('demoController', ['$scope', '$timeout', '$ionicModal',
            function($scope, $timeout, $ionicModal) {
                var vm = this;
                var modal;

                // API
                vm.openModal            = openModal;
                $scope.closeModal       = closeModal;
                $scope.onSelectCarousel = onSelectCarousel;

                activate();

                function activate() {
                    $scope.carouselData1    = createArray(20);
                    $scope.carouselOptions1 = {
                        carouselId    : 'carousel-1',
                        align         : 'left',
                        selectFirst   : true,
                        centerOnSelect: true
                    };

                    //////////

                    function createArray(total, randomImg) {
                        randomImg                = typeof randomImg === 'undefined' ? false : randomImg;
                        var i, model, imgId, arr = [];
                        for (i = 0; i < total; i++) {
                            model = {
                                id     : i,
                                display: 'item ' + i
                            };
                            if (i === 2 || i === 13) {
                                model.display = 'longer ' + model.display;
                            }
                            if (randomImg) {
                                imgId     = Math.floor(Math.random() * 10000);
                                model.src = 'http://lorempixel.com/120/80/?' + imgId
                            }
                            arr.push(model);
                        }

                        return arr;
                    }
                }

                function openModal() {
                    var templateModal = '<ion-modal-view><ion-header-bar><h2>Inside a Modal</h2></ion-header-bar>' +
                        '<ion-content><button class="btn" ng-click="closeModal()">Close modal</button><br><a-carousel item-directive="carousel-text-item" ' +
                        'carousel-options="carouselOptions1" array-provider="carouselData1" ' +
                        'on-select="onSelectCarousel(item)"></a-carousel></ion-content></ion-modal-view>';

                    modal = $ionicModal.fromTemplate(templateModal, {
                        scope: $scope
                    });

                    modal.show();
                }

                function closeModal() {
                    modal.hide();
                }

                function onSelectCarousel(item) {
                    console.log('Carousel item selected:', item);
                }
        }
}());

[nitesh3691]

yes it worked thanks a lot.

Can you please tell me where I made the mistake.

Once again thank you

[sebelga]

Actually I could not find what was the problem in your code :) The only thing was that you changed the order of the methods and $scope vars declarations and probably broke something there.

The 3 important $scope vars to declare before opening the modal are:

• "$scope.carouselOptions1" ==> to set carousel-options on the directive
• "$scope.carouselData1" ==> to set array-provider on the directive
• "$scope.closeModal" ==> to be able to close the modal
• "$scope.onSelectCarousel" ==> to be able to receive which item has been selected selected.

If they are not set correctly before opening the modal an error will rise.