var app = angular.module('printModal', ['ui.bootstrap']);
app.directive('printModal', ['$window', function($window) {
return function(scope, element, attrs) {
var printMe = function() {
var DocumentContainer = document.getElementById('print-content');
var WindowObject = window.open("", "PrintWindow",
"width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.write('<html><head><title>Print it!</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />\
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" /></head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.write('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
/*document.getElementById('main-content').style.visibility = 'hidden';
$window.print();
document.getElementById('main-content').style.visibility = 'visible';*/
}
element.bind('click', printMe);
element.on('$destroy', function() {
element.unbind('click', printMe);
});
}
}]);
app.controller('MainCtrl', ['$modal', '$window', function($modal, $window) {
var ctrl = this;
ctrl.openInvoice = function() {
var modalInstance = $modal.open({
templateUrl: 'print.html',
size: 'lg',
controller: 'PrintCtrl',
controllerAs: 'ctrl'
});
}
ctrl.items = [{
name: 'Baseballs',
quantity: 50,
unitCost: 5,
total: 250
}, {
name: 'Baseball Bats',
quantity: 2,
unitCost: 150,
total: 300
}];
ctrl.print = function() {
$window.print();
}
}]);
app.controller('PrintCtrl',['$window',function($window) {
var ctrl = this;
ctrl.items = [{
name: 'Baseballs',
quantity: 50,
unitCost: 5,
total: 250
}, {
name: 'Baseball Bats',
quantity: 2,
unitCost: 150,
total: 300
}];
}]);
<!DOCTYPE html>
<html ng-app="printModal">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</head>
<body id="main-content" ng-controller="MainCtrl as ctrl" class="container text-center">
<h4>Print Modal Content Demo</h4>
<button class="btn btn-success" ng-click="ctrl.openInvoice()"> Open Modal</button>
<button class="btn btn-warning" ng-click="ctrl.print()"> <i class="fa fa-print"></i> Normal Print</button>
<div>
<table class="table table-condense">
<caption>Sports Products Invoice</caption>
<thead>
<tr class="bg-primary">
<th>Name</th>
<th>Quantity</th>
<th>Item Cost</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in ctrl.items">
<td>{{item.name}}</td>
<td>{{item.quantity}}</td>
<td>{{item.unitCost | number:2}}</td>
<td>{{item.total | number:2}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<div id="print-content">
<div class="modal-header">
<h1>Invoice</h1>
</div>
<div class="modal-body">
<table class="table table-condense">
<caption>Sports Products Invoice</caption>
<thead>
<tr class="bg-primary">
<th>Name</th>
<th>Quantity</th>
<th>Item Cost</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in ctrl.items">
<td>{{item.name}}</td>
<td>{{item.quantity}}</td>
<td>{{item.unitCost | number:2}}</td>
<td>{{item.total | number:2}}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div class="pull-left">
<h5>Ⓒ 2015</h5>
</div>
<div class="pull-right hidden-print">
<button class="btn btn-primary" print-modal=""><i class="fa fa-print"></i>Print</button>
<button class="btn btn-primary" ng-click="$close()">OK</button>
</div>
</div>
</div>