AngularJS打印div内容时ng-bind绑定数据无法显示问题求助

我来帮你排查并解决这个打印时绑定数据不显示的问题，核心问题出在数据绑定时机和新窗口的资源处理上，下面一步步来修复：

问题根源分析 #

1. 数据绑定未完成就获取DOM：当你调用PrintItem()时，Angular可能还没完成ng-bind的数据渲染（比如数据是异步加载的），此时拿到的innerHTML还是未填充数据的模板代码。
2. 冗余的Angular引入：你在新窗口里重复引入了Angular，但没有初始化对应模块，这不仅多余，还可能引发上下文冲突——实际上你只需要原页面已经渲染好的静态HTML内容。

修复后的完整代码 #

我们给控制器注入Angular的$timeout和$document服务（符合Angular最佳实践），调整打印逻辑：

var printItem = { 
  bindings: { onPrint: '&' }, 
  templateUrl: 'app/print-item/print.item.html', 
  controller: PrintComponentController 
};

// 注入必要的Angular服务
function PrintComponentController($timeout, $document){ 
  var vm = this; 
  vm.onPrint = onPrint; 
  vm.PrintItem = PrintItem; 

  function PrintItem(){ 
    // 用$timeout延迟执行，确保Angular完成所有数据绑定和DOM更新
    $timeout(function() {
      // 用$document获取元素，替代原生document操作
      var printElement = $document[0].querySelector("#printproduct");
      var content = printElement.innerHTML; 

      var popupWindow = window.open('','_blank','width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no'); 
      popupWindow.document.open(); 
      // 移除新窗口中不必要的Angular引入，只保留样式和工具脚本
      popupWindow.document.write(`
        <html>
        <head>
          <script type="text/javascript" src="site-assets/libs/jquery-3.3.1.js"></script>
          <link rel="stylesheet" href="site-assets/css/bootstrap.min.css">
          <link rel="stylesheet" href="site-assets/css/custom.css">
          <script type="text/javascript" src="site-assets/libs/solid.min.js"></script>
          <script type="text/javascript" src="site-assets/libs/fontawesome.min.js"></script>
        </head>
        <body onload="window.print(); setTimeout(() => window.close(), 100);">
          ${content}
        </body>
        </html>
      `); 
      popupWindow.document.close(); 
    });
  } 

  function onPrint(obj){ 
    console.log(obj); 
  } 
}

// 显式声明依赖注入，避免代码压缩时出错
PrintComponentController.$inject = ['$timeout', '$document'];

angular.module('app').component('printItem', printItem);

关键修改点说明 #

• $timeout确保绑定完成：Angular的$timeout会在当前数据消化循环结束后执行回调，保证所有ng-bind的数据都已渲染到DOM上。
• 使用$document替代原生document：符合Angular的依赖注入规范，也方便后续的单元测试。
• 移除新窗口的Angular引入：原页面已经完成数据渲染，新窗口只需要静态HTML，无需重复初始化Angular。
• 添加自动关闭窗口逻辑：打印完成后延迟关闭窗口，优化用户操作体验。

额外排查建议 #

如果修改后还是不显示数据，可以在PrintItem()里先打印content到控制台：

console.log(content);

如果控制台输出的HTML里没有绑定的数据，说明触发打印的时机太早（比如异步数据还没请求完成），需要确保在数据加载完成后再调用打印方法。

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