ui-scroll is not working with bootstrap modal?

[shinorz0721]

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <ul class="viewport" ui-scroll-viewport>
                    <li ui-scroll="item in datasource" adapter="adapter" buffer-size="5">
                        <span class="title">{{item.content}}</span>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

With an example in the plunker: https://plnkr.co/edit/mJJkVr?p=preview

[dhilt]

@lim0721lim Thanks for the issue, this is an interesting use case. The point is that your App renders the template with the modal that is hidden initially. This hidden modal contains ui-scroll. The ui-scroll plays with geometry and visibility, this way he decides when and how many data should be retrieved to fill out the viewport. That's why we see only 5 rows when the modal is open; only 1 pack of datasource items had been requested. The viewport invisibility prevents other requests.

As a simple but dirty workaround I can suggest to increase buffer size value from 5 (default) to, say, 30: buffer-size="30". In this case the initial first request should be enough to fill out the viewport, and the scrollbar should appear.

But the right solution is to render the ui-scroll only when the modal is shown: <li ui-scroll ng-if="isModalOpen" ...>. It is not obvious how to do it without any Angular specific Bootstrap wrapper. Would you like to try https://angular-ui.github.io/bootstrap/#!#modal ? This is another Angular UI product. Right now I have no live example but it should be pretty easy to integrate them both within a single app. Please let me know if you have any issues with it!