Question

我正在使用AngularJs 1.7和uib工具提示，构建一个运动应用程序。

我正在使用uib-tooltip作为弹出窗口，供用户选择播放器。

我需要检测窗口的末端，以触发无限滚动代码。

我已经尝试了很多方法，但是在uib工具提示模板中使用angularjs无法检测到滚动结束。

我的uib工具提示中有图片列表ng-repeat，当我到达底部时，我应该加载列表的其余部分，这是一个无限滚动，正在其他地方工作该应用程序。

我尝试了一些angularjs指令，只要包含在uib工具提示HTML模板中，该指令就不会起作用。

下面，这是唯一能够使它起作用的模板，我不得不在uib模板中放入一个JQUERY代码，但是现在我需要从中触发我的angularjs函数来加载数据，我不知道如何这样做，因为我无法与angularjs控制器对话。

 <div style="background-color:white;height:30px;"> Ajouter un footballer {{categorie}}
 <button ng-click="closeTooltips()" class="pull-right btn btn-success">X </button></div>

    <div class="row">
     <div style="height:400PX;width:400px;overflow:scroll" scrollToEnd id="infinite" >
        <div class="col-md-12">
            <div  id="mesvignettes">
                <div  ng-repeat="footballeur in footballers |orderBy:filtre | filter:{'poste':filtre2} |filter : filtre3 |filter:n |filter:filtrePays" 
                ng-click="ajouterFootballerTerrain(footballeur); $event.stopPropagation();" ng-class="{'vignette-disable': footballeur.disponible == 'false' }">
                    <div id="foo-{{$index}}"></div>
                    <div class="row">
                        <div >
                            <div ng-model="footballers">
                                <div>
                                    <center><img ng-src="{{footballeur.photo|| 'img/defaut.png'}}" class="photov" /></center>
                                    </img>
                                    <center><b>{{footballeur.prenom}} {{footballeur.nom}} </b></center>
                                    <br>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
            </div>
        </div>
        </div>
    </div>


    <script>
    jQuery(function($) {

            $("#infinite").on('scroll', function() {

                if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                    console.log('endreach');
                    alert('scrolled');
                    // debut = $scope.footballers.length ;
                    // $scope.chargerMesDatas();


                }
            })
        });
    </script>

您会注意到，已添加scrollToBottom指令，但该指令不起作用。模板中只有直接的jQuery代码有效。 jQuery滚动功能被触发了4次，而不是1次，完全不知道为什么！

我真的对此感到困惑，请帮助我，我真的不明白如何在不访问控制器的情况下触发$ scope.chargeData（）函数。

我应该使用$ anchorScroll代替来检测结束吗？

无法检测到uib-tooltip模板到达底部

0 个答案: