getBoundingClientRectは、実行時にangleディレクティブに対してゼロを返します。

Question

巨大なコンテンツの各段落を追跡するための角度ディレクティブを作成しました。コンテンツがページ内で静的な場合、正常に動作します。コンテンツがAPIによって提供されるとき、getBoundingClientRectは常にプレースホルダーに対してゼロを返します。私はそれを見る前に再コンパイルする。どのように動的コンテンツ内のディレクティブのgetBoundingClientRectを計算する？

マイコンテンツ：私のDiectiveで

<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

問題は$ compileで発生しました。私はAPIレスポンス（storytrackerディレクティブで）をコンパイルし、ng-bind-htmlでバインドしていましたが、レンダリング中ではなく$ compile中にディレクティブがトリガされました。さて、にを追加しました。それは期待どおりに動作します。

Answer 2

物事のカップルを試してみてください：タイムアウトラッパーのメソッド呼び出し--push

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

これは、エンジンの実行が完了し、問題が解決する可能性があります。

また、次のような「準備完了」のラッパーで実行、ラップ試すことができます。そして、あなたはどのサービスからのコールバックを取得する必要があります、これもdosen't作品--If

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

をコンテンツを読み込み、操作ポストを実行します。