Question

我用ng-repeat得到了这个观点：

    <div style="overflow: auto; max-height: 550px; min-height:550px;"  >
        <table  class="table table-bordered table-hover  " border="1"  >
            <thead fix-head>
                <tr>  
                    <th>Photo</th>
                    <th>Identifiant</th>
                    <th>Prénom</th>
                    <th>Nom</th>
                    <th>Editer</th>
                </tr>
            </thead>

            <tbody >
                <tr ng-repeat="footballeur in footballers| limitTo: limit "   >
                    <td><img ng-src="img/{{footballeur.photo|| 'defaut.png'}}"/></td>
                    <td>{{footballeur.identifiant}}</td>
                    <td>{{footballeur.prenom}}</td>
                    <td>{{footballeur.nom}}</td>
                    <td><button ng-click="modifier_footballeur(footballeur)" class="btn btn-primary" aria-label="Left Align">Editer</button></td>
                </tr>
            </tbody>
    </table>
<button ng-click="loadMore()">more</div>

在我的控制器中：

$scope.loadMore = function() {
    $scope.limit += 5;
};

“更多”按钮效果非常好，所以每次点击它时，我都会向ng-repeat添加5个足球运动员。问题是我想检测div底部的结尾，并在每次到达底部时启动loadMore（）。我已经尝试了3个指令和完整的Jquery没有任何工作，并且正确地定义了loadMore（）..

Jquery很好地检测div的底部，但是即使使用angular.element语法，也拒绝在其函数内执行loadMore（）...

这个下一个指令很好地检测到div的结尾，但是我不知道如何从它启动$ scope.loadMore（），它不能识别范围。。也许你应该有一个想法？非常感谢：

monApp.directive("scrollable", function() {
    return function(scope, element, attrs) {
      var container = angular.element(element);
      container.bind("scroll", function(evt) {
          if (container[0].scrollTop <= 0) {
              alert('On the top of the world I\'m singing I\'m dancing.');

          }
          if (container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight) {
              alert('On the bottom of the world I\'m waiting.');
              $('#liste').scope().loadMore();
          }
      });
    };
  })

AngularJs指向无限滚动不起作用

0 个答案: