Angular打印HTML表格指定行时$scope数据无法显示问题

你遇到的核心问题很明确：新弹出的打印窗口没有Angular的上下文环境，直接拿原始innerHTML的话，里面的{{printValues.credits}}这类插值表达式根本不会被解析成实际数据——Angular只会编译当前应用所在主窗口的DOM，新窗口是完全独立的、没有加载Angular的环境，所以插值符号会原封不动地显示，或者干脆不显示内容。

另外先提个小细节：你的打印HTML里有个语法错误，<table class="table table-responsive"后面少了闭合的>，这个会影响DOM渲染，先修正它。

解决方案1：用Angular的$compile服务编译模板（推荐，符合Angular规范） #

我们可以在主窗口里先把打印模板和当前$scope绑定编译，生成已经替换好数据的HTML，再写到新窗口里。

步骤： #

1. 在你的控制器里注入$compile服务
2. 编译目标打印元素，触发数据绑定更新
3. 提取编译后的HTML内容

修改后的JS代码：

// 确保控制器依赖注入了$compile
$scope.printToCart = function(printSectionId, item) { 
  $scope.printValues = item; 

  // 获取要打印的原始元素
  var printElement = document.getElementById(printSectionId);
  // 编译元素并绑定到当前scope
  var compiledElement = $compile(printElement)($scope);
  // 触发digest循环，确保数据绑定完全更新
  $scope.$digest();
  // 提取编译后的最终HTML
  var innerContents = compiledElement[0].innerHTML; 

  var popupWindow = window.open('', '_blank', 'width=900,height=800,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no'); 
  popupWindow.document.open(); 
  $scope.datagetinLoading = false; 
  $('#preparingToSaveInvoice').modal('hide'); 
  $('#preparingToPrintInvoice').modal('hide'); 
  $('#preparingToDownloadPDF').modal('hide'); 
  $('#printReceiptDetailsWaiting').modal('hide'); 

  popupWindow.document.write('<html><head><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"><body onload="window.print()"><style>#footer { position:relative; bottom:0; width:100%; height: auto; } #header { display: flow-root; height: auto; border-bottom: 1px solid #333;} </style><div class="wrapper" style="padding-right: 10px;">' + innerContents + '</div></body></html>'); 
  popupWindow.document.close(); 
};

解决方案2：手动替换模板中的插值表达式（简单直接，适合少量数据） #

如果不想引入$compile，可以直接把item里的属性值替换到模板字符串里，绕过Angular的插值机制。

修改后的JS代码：

$scope.printToCart = function(printSectionId, item) { 
  // 获取原始模板内容
  var template = document.getElementById(printSectionId).innerHTML;
  // 手动替换所有插值表达式为实际数据
  var innerContents = template
    .replace('{{printValues.credits}}', item.credits)
    .replace('{{printValues.cost}}', item.cost);

  var popupWindow = window.open('', '_blank', 'width=900,height=800,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no'); 
  popupWindow.document.open(); 
  $scope.datagetinLoading = false; 
  $('#preparingToSaveInvoice').modal('hide'); 
  $('#preparingToPrintInvoice').modal('hide'); 
  $('#preparingToDownloadPDF').modal('hide'); 
  $('#printReceiptDetailsWaiting').modal('hide'); 

  popupWindow.document.write('<html><head><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"><body onload="window.print()"><style>#footer { position:relative; bottom:0; width:100%; height: auto; } #header { display: flow-root; height: auto; border-bottom: 1px solid #333;} </style><div class="wrapper" style="padding-right: 10px;">' + innerContents + '</div></body></html>'); 
  popupWindow.document.close(); 
};

修正后的打印HTML（修复语法错误） #

<div id="printquotationPreview" hidden> 
  <div> 
    <table class="table table-responsive"> 
      <tbody> 
        <tr><td><div><img src="assets/img/logo.png"> 
          <p> INVOICE</p> 
        </div></td></tr> 
      </tbody> 
    </table> 
  </div> 
  <br> 
  <div class="row col-sm-12"> 
    <div> 
      <table class="table table-hover"> 
        <thead> 
          <tr> 
            <th>SL.NO</th> 
            <th>DESCRIPTION</th> 
            <th>AMOUNT</th> 
          </tr> 
        </thead> 
        <tbody> 
          <tr class="table-row"> 
            <td>1</td> 
            <td>Credit Purchase {{printValues.credits}}</td> 
            <td>{{printValues.cost}}</td> 
          </tr> 
        </tbody> 
      </table> 
    </div> 
  </div>
</div>

内容的提问来源于stack exchange，提问作者Nicoleta Wilskon