javascript - AngularJS，添加滚动指令以拾取滚动底部不起作用

Question

这是检测滚动到 iframe 底部的基本指令，但它没有启动，您看到问题了吗？

(function() {
  angular.module('myapp').directive('textAgreement', function($timeout) {
    return {
      restrict: 'A',    
      scope: true,
      compile: function(tElement) {
        tElement.append('<div ng-show="bottom">There is more...</div>');
        return function(scope, element) {
          var elm = element[0];        
          var check = function() {
            scope.bottom = (elm.offsetHeight + elm.scrollTop >= elm.scrollHeight);
          };
          var appliedCheck = function() {
            scope.$apply(check);
          };
          element.bind('scroll', appliedCheck);
          check();        
          $timeout(check,500);          
          }; 
      }    
    };
  });   
})();

这是 HTML:

<div class="row">
    <div class="col-xs-12 body-text">
        <h4>Use Agreement</h4>
        <div class="col-xs-12" id="tos" class="load-iframe">
            <iframe text-agreement id="agreeFrame" class="agree-frame" src="{{ ::trustSrcAgreementUri }}"  style="border:0" width="100%" height="100%"></iframe>
        </div>
    </div>
</div>  

Answer 1

我无法测试您的代码，因为您没有添加要使用的内容，但我认为您没有正确监听 iframe 元素。你必须将事件绑定(bind)到 iframe 的文档元素。

看看这个answer