$ window.print(), không in dữ liệu mô hình cập nhật trong js góc

Question

Tôi có một bảng có một số dữ liệu để xem bằng html. khi tôi nhấp vào in, tôi cần lấy tất cả dữ liệu từ db và in ra. Tôi nhận được dữ liệu và điền dữ liệu mô hình khi tôi nhấp vào in, chỉ mô hình được cập nhật và in cho thấy dữ liệu cũ. Trong đoạn code dưới đây, newitems không được thêm vào các mục khi tôi bấm vào in.

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

Sử dụng một thời gian chờ với dịch vụ $timeout góc sẽ sửa chữa nó:

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

Đối với một lời giải thích toàn diện là tại sao, vui lòng xem câu trả lời DVK của (2nd một) ở đây: Why is setTimeout(fn, 0) sometimes useful?

TL: DR;

Khi bạn gọi $window.print() HTML cũ vẫn xuất hiện kể từ khi trình duyệt chưa hiển thị. Nó đang chờ đợi để hoàn thành chạy hàm javascript. thiết lập một $ timeout 0 sẽ xếp hàng in ở cuối hàng đợi thực thi và sẽ đảm bảo nó sẽ xảy ra sau khi HTML đã được trả về. (Tôi vẫn khuyên bạn nên đọc câu trả lời của mình)