$ window.print(), druckt die aktualisierten Modelldaten in angular js nicht

Question

Ich habe eine Tabelle mit einigen Daten in HTML anzuzeigen. Wenn ich auf Drucken klicke, muss ich alle Daten von db abrufen und ausdrucken. Ich erhalte die Daten und befülle die Modelldaten, wenn ich auf "Drucken" klicke, nur das Modell wird aktualisiert und der Ausdruck zeigt die alten Daten an. Im folgenden Code werden neue Elemente nicht zu Elementen hinzugefügt, wenn ich auf Drucken klicke.

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

ein Timeout mit kantigem der $timeout-Dienst wird es beheben:

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

Für eine umfassende Erklärung, warum finden Sie DVK Antwort (2. eins) hier: Why is setTimeout(fn, 0) sometimes useful?

TL: DR;

Wenn Sie $window.print() aufrufen, ist das alte HTML immer noch vorhanden, da der Browser es noch nicht gerendert hat. Es wartet darauf, die JavaScript-Funktion zu beenden. Wenn Sie ein $ timeout 0 setzen, wird der Ausdruck am Ende der Ausführungswarteschlange in die Warteschlange gestellt und es wird garantiert, dass dies geschieht, nachdem der HTML-Code gerendert wurde. (Ich empfehle immer noch dringend, seine Antwort zu lesen)