html - 确保在 angularjs 中打印预览之前加载图像

Question

     <section class="col-xs-6">
     <img ng-src = "{{ecard.secondaryLogoUrl}}" >
 </section>
 <section class="col-xs-6">
             <!-- Make sure image is loaded and then print the ecard -->
             <img ng-src="{{ecard.templateUrl}}" alt="" onload="window.print()" >           
 </section>

在我的 angularjs 应用程序中，我有 2 张图像要显示用于打印预览。如果我从第二部分调用 window.print() 方法，则不会加载第一部分图像。在调用 window.print() 方法之前，如何确保两个图像都已正确加载。谢谢马诺哈尔

Answer 1

您可以在变量上设置作用域观察器并检查属性

$scope.$watch('ecard', function(new, old) {
  // check if both images are present
  if (new && new.secondaryLogoUrl && new.templateUrl) {
    window.print();
  }
})