Angular ui-view

[BillBensing]

I was playing with Flickity for the first time today and could not get it to work when in ui-views with Angular ui-router. Here are my troubleshooting attempts:

1) I tried a reduced test case and the code worked.

        <div class="gallery js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true }'>
            <div class="gallery-cell"></div>
            <div class="gallery-cell"></div>
        </div>

2) I then put that same code under the ui-vew in my index.html for the angular app, and it worked.

       <div ui-view></div>
        <div class="gallery js-flickity" data-flickity-options='{ "cellAlign": "left", "contain": true }'>
            <div class="gallery-cell"></div>
            <div class="gallery-cell"></div>
        </div>

3) When I put the code into a view template (templateUrl), it did not work. I just got each of the two div's stacked on-top of each other when the page rendered. It rendered like:

            <div class="gallery-cell"></div>
            <div class="gallery-cell"></div>

I'm hoping this isn't some simple mistake on my part. Any Ideas?

[BillBensing]

Update:

I tried initializing Flickity with JQuery in the view templateUrl and it worked.

    <div class="gallery main-gallery">
        <div class="gallery-cell"></div>
        <div class="gallery-cell"></div>
    </div>

    <script>
        $(document).ready(function () {
            $('.main-gallery').flickity({
                // options
                cellAlign: 'left',
                contain: true,
                wrapAround: true
            });
        });
    </script>

[desandro]

I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[douglasdeodato]

thanks @BillBensing for that, I could not understand why I need do that for make the plugin works with angular ui-view, could you explain me better? thank you.

I tried like that and menu works for 3 seconds after that disappear in somewhere in the space :), why I don't know.

  <div class="gallery js-flickity">
        <div class="gallery-cell"></div>
        <div class="gallery-cell"></div>
    </div>

    <script>
        $(document).ready(function () {
            $('.js-flickity').flickity({
                // options
                cellAlign: 'left',
                contain: true,
                wrapAround: true
            });
        });
    </script>

so I followed your suggestion above @BillBensing and the slide could work well.

@desandro maybe we could include in the documentation how to apply using angular ui-view ?

a issue happen using the carousel with angular ui-view

thanks everyone the plugin is marvelous.