2016-05-24 5 views
0

Я хочу создать способ печати раздела веб-страницы, поэтому я создал функцию printDiv, которая принимает идентификатор div и всплывает новое окно и печатает внутренний XML-файл div. Это работает, однако, при использовании innerHTML с Angular он, кажется, игнорирует выражения Angular ng-show и печатает все.innerHTML игнорирует Angular ng-show

Есть ли простой способ получить истинное innerHTML, которое отображается пользователю после обработки Angular ng-show?

Я создал базовую версию с кнопкой печати, которая вызывает функцию printDiv в этом plunker here.

Вот код, который находится в 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(); 
    } 
}); 
+0

CSS Print Media, нет необходимости открывать новое окно. – epascarello

ответ

1

использование попытка нг-если вместо нг-шоу

<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> 

найти разницу между нг-шоу и нг-если here

Смежные вопросы