Global config is unusable

[iiosenov]

trafficstars

Tryed this sample from the README:

app.config(['slickCarouselConfig', function (slickCarouselConfig) { slickCarouselConfig.dots = true; slickCarouselConfig.autoplay = false; }])

This is not working because in lib's source code, in initOptions function, angular.extend is not used correctly.

QUICK FIX: switch places of first and second arguments. This way, the default values of config parameters will be loaded, then values from slickCarouselConfig and finally the settings object (if any) passed to slick directive

[iiosenov]

The fix here really needs 15 seconds of time without breaking anything.

[devmark]

Will take a look soon. Thanks for reprt

[r3plica]

I agree with the original poster, your extend doesn't seem to be working correctly. I have switched the positions of the config and the default object and it does work as it should. angular.copy(slickCarouselConfig) should override default options.

[CydGoblin]

What did you change? @addctdto @r3plica So it should be...?

initOptions = function () {
            scope.settings,
            options = angular.extend(angular.copy(slickCarouselConfig), {

Tried this but still doesn't work.

[r3plica]

No, that is wrong. It should be

initOptions = function () {
    options = angular.extend({
            enabled: scope.enabled !== 'false',
            accessibility: scope.accessibility !== 'false',
            adaptiveHeight: scope.adaptiveHeight === 'true',
            autoplay: scope.autoplay === 'true',
            autoplaySpeed: scope.autoplaySpeed != null ? parseInt(scope.autoplaySpeed, 10) : 3000,
            arrows: scope.arrows !== 'false',
            asNavFor: scope.asNavFor ? scope.asNavFor : void 0,
            appendArrows: scope.appendArrows ? angular.element(scope.appendArrows) : angular.element(element),
            prevArrow: scope.prevArrow ? angular.element(scope.prevArrow) : void 0,
            nextArrow: scope.nextArrow ? angular.element(scope.nextArrow) : void 0,
            centerMode: scope.centerMode === 'true',
            centerPadding: scope.centerPadding || '50px',
            cssEase: scope.cssEase || 'ease',
            customPaging: attr.customPaging ? function (slick, index) {
            return scope.customPaging({slick: slick, index: index});
            } : void 0,
            dots: scope.dots === 'true',
            draggable: scope.draggable !== 'false',
            fade: scope.fade === 'true',
            focusOnSelect: scope.focusOnSelect === 'true',
            easing: scope.easing || 'linear',
            edgeFriction: scope.edgeFriction || 0.15,
            infinite: scope.infinite !== 'false',
            initialSlide: parseInt(scope.initialSlide) || 0,
            lazyLoad: scope.lazyLoad || 'ondemand',
            mobileFirst: scope.mobileFirst === 'true',
            pauseOnHover: scope.pauseOnHover !== 'false',
            pauseOnDotsHover: scope.pauseOnDotsHover === "true",
            respondTo: scope.respondTo != null ? scope.respondTo : 'window',
            responsive: scope.responsive || void 0,
            rows: scope.rows != null ? parseInt(scope.rows, 10) : 1,
            slide: scope.slide || '',
            slidesPerRow: scope.slidesPerRow != null ? parseInt(scope.slidesPerRow, 10) : 1,
            slidesToShow: scope.slidesToShow != null ? parseInt(scope.slidesToShow, 10) : 1,
            slidesToScroll: scope.slidesToScroll != null ? parseInt(scope.slidesToScroll, 10) : 1,
            speed: scope.speed != null ? parseInt(scope.speed, 10) : 300,
            swipe: scope.swipe !== 'false',
            swipeToSlide: scope.swipeToSlide === 'true',
            touchMove: scope.touchMove !== 'false',
            touchThreshold: scope.touchThreshold ? parseInt(scope.touchThreshold, 10) : 5,
            useCSS: scope.useCSS !== 'false',
            variableWidth: scope.variableWidth === 'true',
            vertical: scope.vertical === 'true',
            verticalSwiping: scope.verticalSwiping === 'true',
            rtl: scope.rtl === 'true'
        }, angular.copy(slickCarouselConfig), scope.settings);

    };

[tahaerden]

I still cannot make the global options work. I am just adding the config part in the readme file at the end of my controller. Simply nothing happens, no errors and the options are not applied to my slick carousels.

Is there anything I should add? Should my slick tags have seperate setting option names or something like settings="global" ?

Basically, I have around 5 different carousels in my page. And they have all the same options. I don't want to create the same settings object 5 times. I also tried creating one settings object, and assigning it to all settings objects seperately. But then they all use the same method object, so my custom previous and next buttons do not work.

Any idea how to solve this?

[mcMickJuice]

this PR fixes this issue

https://github.com/devmark/angular-slick-carousel/pull/99

@devmark would it be possible for you to look at this PR and merge it?