Question

我想要一种创建方式来打印网页的一部分，所以我创建了一个名为printDiv的函数，它接受一个div ID并弹出一个新窗口并打印div的innerHTML。然而，当使用带有Angular的innerHTML时，它似乎忽略了Angular ng-show语句并打印了所有内容。

在Angular ng-show处理之后，是否有一种简单的方法可以获得呈现给用户的真正的innerHTML？

我创建了一个带有打印按钮的基本版本，该按钮调用此plunker here中的printDiv函数。

以下是plunker中的代码：

<button class="btn" ng-click="printDiv('MainPrintPane')">Print</button>
<div id="MainPrintPane">
  <div ng-show="showDiv1">Show if showDiv1 is true</div>
  <div ng-show="showDiv2">Show if showDiv2 is true</div>
  <div ng-show="showDiv3">Show if showDiv3 is true</div>
</div>


app.controller('MainCtrl', function($scope) {
  $scope.showDiv1 = true;
  $scope.showDiv2 = false;
  $scope.showDiv3 = false;

  $scope.printDiv = function(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var popupWin = window.open('', '_blank', 'width=600,height=500,resizable,scrollbars=1');
    popupWin.document.open();
    popupWin.document.write('<html><head><title>Print</title></head><body onload="window.print()">' + printContents + '</body></html>');
    popupWin.document.close();
  }
});

Answer 1

尝试使用ng-if代替ng-show

<button class="btn" ng-click="printDiv('MainPrintPane')">Print</button>
   <div id="MainPrintPane">
   <div ng-if="showDiv1">Show if showDiv1 is true</div>
   <div ng-if="showDiv2">Show if showDiv2 is true</div>
   <div ng-if="showDiv3">Show if showDiv3 is true</div>
</div>

找出ng-show和ng-if here

之间的区别

innerHTML忽略Angular ng-show

1 个答案: