Drucken Angular verarbeitet HTML

Question

Ich versuche, eine div zu drucken, die mit Angular gerendert wurde. Ich bin als Ausgangspunkt, um diese Antwort mit https://stackoverflow.com/a/30765875/285190, mit der Druckfunktion ziemlich einfach zu sein

$scope.printIt = function(){ 
    var table = document.getElementById('printArea').innerHTML; 
    var myWindow = $window.open('', '', 'width=800, height=600'); 
    myWindow.document.write(table); 
    myWindow.print(); 
}; 

Das Problem der innerHTML ist enthält alle Elemente, die, wenn die ng-showng-hide Richtlinien existieren würde noch nicht ausgeführt worden ist.

Gibt es eine Möglichkeit, den tatsächlichen HTML-Code zu erhalten, den der Client sieht, d. H. Nachdem Angular seine Magie ausgeführt hat?

Answer 1

Verwenden Sie den $ compile-Dienst, um angularisiertes HTML in aktuelles HTML umzuwandeln.

Demonstration von $ kompilieren https://stackoverflow.com/a/26660649/5317329

$scope.printIt = function() { 
    angular.element('#tempHtml').html(""); 
    var table = document.getElementById('printArea').html(); 
    var compiledHTML = $compile(table)($scope); 
     $timeout(function() { 
      angular.element(document.querySelector('#tempHtml')).append(compiledHTML);//Please added <div id="tempHtml"></div> in page/View for temporary storage, Clear the div after print. 
      console.log(angular.element('#tempHtml').html()); 
      var myWindow = $window.open('', '', 'width=800, height=600'); 
      myWindow.document.write(angular.element('#tempHtml').html()); 
      myWindow.print(); 
      angular.element('#tempHtml').html("");//Clearing the html 
     }, 300); // wait for a short while,Until all scope data is loaded If any complex one 
}; 

Hope this helfen Ihnen