getBoundingClientRect gibt Null für die Winkelanweisung zur Laufzeit aus

Question

Ich schrieb eine eckige Anweisung, um jeden Absatz in einem großen Inhalt zu verfolgen. Wenn der Inhalt auf der Seite statisch ist, funktioniert es einwandfrei. Wenn der Inhalt von der API bedient wird, gibt getBoundingClientRect immer Null für meine Platzhalter zurück. Ich kompiliere es neu, bevor ich es zur Ansicht gebe. Wie berechnet man getBoundingClientRect für eine Direktive in dynamischen Inhalten?

Mein Inhalt:

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

In meinem Diective:

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

Das Problem war mit $ compile. Ich kompilierte die API-Antwort (mit Storytracker-Direktive) und bind es über ng-bind-html, die Anweisung wurde während $ kompilieren nicht während des Renderns ausgelöst. Jetzt habe ich es geändert in append. Es funktioniert wie erwartet.

Answer 2

ein paar Dinge versuchen:

--Push der Methodenaufruf in einem Timeout-Wrapper

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

Dies wird warten bis die re ndering engine hat die Ausführung abgeschlossen, wodurch das Problem möglicherweise behoben wurde.

Sie können auch versuchen, die Ausführung in der „ready“ verpackung, wie zum Beispiel:

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

--Wenn diesen auch dosen't Arbeit, dann werden Sie einen Rückruf aus dem Dienst bekommen müssen die lädt den Inhalt und führt den Vorgang danach aus.