$ window.print(), nie drukuje zaktualizowanych danych modelu w kątowym js

Question

Mam tabelę z danymi do wyświetlenia w html. kiedy klikam drukowanie, muszę pobrać wszystkie dane z db i wydrukować je. Dostaję dane i zapełniam dane modelu, gdy klikam na wydruku, tylko model jest aktualizowany i druk pokazuje stare dane. W poniższym kodzie newitems nie jest dodawany do elementów po kliknięciu na wydruku.

http://jsfiddle.net/vijaivp/Y3BJa/306/

HTML

<div ng-app> 
    <div class="hidden-print" ng-controller="PrintCtrl"> 
     <br /> 
     <div id="overallPrint" class='visible-print' style="float:left;  margin-right:50px;"> 
      <h4>Overall Report</h4> 

      <table border="1"> 
       <thead> 
        <tr> 
         <td>Name</td> 
         <td>Price</td> 
         <td>Quantity</td> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="item in items"> 
         <td>{{item.Name}}</td> 
         <td>{{item.Price}}</td> 
         <td>{{item.Quantity}}</td>      
        </tr> 
       </tbody> 
      </table> 

      <br> 
      <input type="button" value="Print Overall" ng-click='printOverallReport()' /> 
     </div> 
    </div> 
</div> 

JS

function PrintCtrl($scope, $window, $q) { 
    $scope.items = [ 

     {Name: "Soap", Price: "25", Quantity: "10"}, 
     {Name: "Shaving cream", Price: "50", Quantity: "15"} 
    ]; 

    $scope.newitems = [ 
     {Name: "Shampoo", Price: "100", Quantity: "5"} 
    ]; 

    $scope.printOverallReport = function() { 
     $scope.items.push($scope.newitems[0]); 
     $window.print(); 
    }; 
} 

Answer 1

Korzystanie timeout z $timeout usługi kątowej będzie to naprawić:

function PrintCtrl($scope, $window, $q, $timeout) { 
     $scope.items = [ 

      {Name: "Soap", Price: "25", Quantity: "10"}, 
      {Name: "Shaving cream", Price: "50", Quantity: "15"} 
     ]; 

     $scope.newitems = [ 
      {Name: "Shampoo", Price: "100", Quantity: "5"} 
     ]; 

    $scope.printOverallReport = function() { 
     $scope.items = $scope.newitems; 
     console.log($scope.items.length); 
     $timeout($window.print, 0); 
     console.log($scope.items.length); 
     }; 

} 

Fiddle

Dla kompleksowego wyjaśnienia, dlaczego można znaleźć odpowiedź na DVK (2nd jeden) tutaj: Why is setTimeout(fn, 0) sometimes useful?

TL: DR;

Po wywołaniu $window.print() stary kod HTML jest nadal obecny, ponieważ przeglądarka go jeszcze nie wyrenderowała. Czeka, aby zakończyć działanie funkcji javascript. Ustawienie $ timeout 0 spowoduje umieszczenie kolejki w kolejce na końcu kolejki wykonawczej i zagwarantuje, że stanie się to po wyrenderowaniu kodu HTML. (Wciąż zdecydowanie zalecamy przeczytanie jego odpowiedzi)