I wanted to put this as a comment, but I don't have enough rep so please excuse me. :/
Maybe not a direct answer, but I suggest you also take a look at this directive I found some time ago:
This directive lets you isolate specific parts of your page for printing.
app.directive('ngPrint', function () {
var printSection = document.getElementById('printSection');
// if there is no printing section, create one
if(!printSection) {
printSection = document.createElement('div');
printSection.id = 'printSection';
document.body.appendChild(printSection);
}
function link(scope, element, attrs) {
element.on('click', function () {
printSection.innerHTML = '';
var elemToPrint = document.getElementById(attrs.printElementId);
if(elemToPrint) {
printElement(elemToPrint);
}
});
window.onafterprint = function () {
// clean the print section before adding new content
printSection.innerHTML = '';
}
}
function printElement(elem) {
// clones the element you want to print
var domClone = elem.cloneNode(true);
printSection.appendChild(domClone);
window.print();
}
return {
link: link,
restrict: 'A'
};
});
You can define what id of element this directive will work on by specifying the print-element-id attribute, like so:
<button ng-print print-element-id="printThis">Print</button>
And you define the printable area by using the same id, like this:
<div id="printThis">
<!--insert printable content here.-->
</div>
This clones all contents of the element with id of printThis into an element with id of printSection, which is appended at the end of the document. What's left to do is to hide printSection when you're not printing, and show only the printSection, hide everything else when you are.
The only other thing to remember is to include styles for printing. Mine looked like this:
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
display:none;
visibility:hidden;
}
#printSection, #printSection *:not(table):not(thead):not(tbody):not(tr):not(td):not(th){
display: block;
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
margin-bottom:0;
}
table{
display:table;
visibility:visible;
}
thead{
display:table-header-group;
visibility:visible;
}
tbody{
display:table-row-group;
visibility:visible;
}
td, th{
display:table-cell;
visibility:visible;
}
tr{
display:table-row;
visibility:visible;
}
}
I used this in an app I've been developing, where the dashboard and UI components were interfering with the printability of the contents I wanted to print.
Credit goes to this article. I've since modified the directive, but I never would've done it without reading it.
As an added comment, I think what you're trying to accomplish is something out of Angular's capabilities. You can print up to n items or articles, but there's no easy way to define them as pages inside the Angular app itself. What I suggest is to use @zeroflagL's answer in conjunction with this directive.
<div id="printThis">
<p ng-repeat="essay in essays" class="pageBreak>
{{essay}}
</p>
</div>
My two cents.
