javascript - getBoundingClientRect 在运行时为 Angular Directive(指令)返回零

Question

我写了一个 Angular Directive(指令)来跟踪大量内容中的每个段落。当页面中的内容是静态的时，它工作正常。当内容由 API 提供时，getBoundingClientRect 总是为我的占位符返回零。在查看之前我会重新编译。如何为动态内容中的指令计算 getBoundingClientRect？

我的内容:

<p storytracker="261">"He don't look to have taken much harm." said Mrs. White politely.</p>

在我的指令中:

  angular.module('web')
    .directive('storyTracker', storyTracker);

  function storyTracker($compile) {
    var directive = {
      restrict: 'EA',
      transclude: true,
      scope: {
        sid: '='
      },
      link: function(scope, elem, attrs) {
        //Check if element is in viewport on page load
        if (isElementInViewport(elem[0])) {
           //Element is in view port
        }

        //Check if element is in viewport on page scroll
        var page = angular.element(window);
        page.bind('scroll', function() {
          if (isElementInViewport(elem[0])) {
            //Element is in view port
          }
        });
      }
    };
    return directive;
  }

      function ifElementinviewport(el) {
        var rect = el.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }

Answer 1

尝试一些事情:

--将方法调用推送到超时包装器中

$timeout( ifElementinviewport, 0 ).then( function(isElementInViewPortFlag) {
    //if condition checking
});

这将等到渲染引擎完成执行，这可能会解决您的问题。

您也可以尝试将执行包装在“就绪”包装器中，例如:

angular.element(elem).ready(function () {
   //elem is the div which holds the dynamic content
});

--如果这也不起作用，那么您将必须从加载内容的服务获得回调并执行发布后的操作。