$ window.print(), не печатает обновленные данные модели в угловых js

Question

У меня есть таблица с некоторыми данными для просмотра в html. когда я нажимаю print, мне нужно получить все данные из db и распечатать. Я получаю данные и заполняю данные модели, когда я нажимаю на печать, обновляется только модель, а печать показывает старые данные. В приведенном ниже коде новые элементы не добавляются к элементам, когда я нажимаю на печать.

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

Использование тайм-аута с $timeout службы угловых будет исправить:

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

Для полного объяснения того, почему, смотрите ответ ДВК (второй один) здесь: Why is setTimeout(fn, 0) sometimes useful?

TL: DR;

Когда вы вызываете $window.print(), старый HTML-код по-прежнему присутствует, так как браузер еще не отобразил его. Он ждет завершения работы функции javascript. установка $ timeout 0 поставит очередь на печать в конце очереди выполнения и гарантирует, что это произойдет после того, как HTML был отображен. (Я все еще настоятельно рекомендую прочитать его ответ)