(function (angular) { 'use strict'; var appName = 'app'; var app = angular.module(appName, ['ui.bootstrap']); app.controller('app.invoice', ['$scope', '$modal', invoiceCtrl]); app.controller('app.print', [printCtrl]); function invoiceCtrl($scope, $modal) { var ctrl = this; ctrl.openInvoice = function () { var modalInstance = $modal.open({ templateUrl: 'invoice', size: 'lg', controller: 'app.print', controllerAs: 'ctrl' }); } ctrl.openInvoiceNoPrint = function () { var modalInstance = $modal.open({ templateUrl: 'invoiceNoPrint', size: 'lg', controller: 'app.print', controllerAs: 'ctrl' }); } } function printCtrl() { var ctrl = this; ctrl.items = [{name:'Baseballs',quantity: 50,unitCost: 5, total: 250 },{name:'Baseball Bats',quantity: 2,unitCost: 150, total: 300 }]; ctrl.print = function () { window.print(); } } })(angular);
<div> <div ng-controller="app.invoice as ctrl" class="container text-center"> <h4>Print Modal Content Demo</h4> <button class="btn btn-success" ng-click="ctrl.openInvoice()"> <i class="fa fa-print"></i> Print Modal Dialog</button> <button class="btn btn-warning" ng-click="ctrl.openInvoiceNoPrint()"> <i class="fa fa-print"></i> Normal Print</button> </div> </div> <script type="text/ng-template" id="invoice"> <div id="print-content"> <style> @media print { body * { visibility: hidden; } #print-content * { visibility: visible; } .modal{ position: absolute; left: 0; top: 0; margin: 0; padding: 0; min-height:550px } } </style> <div class="modal-header"> <h1>Invoice by ozkary.com</h1> </div> <div class="modal-body"> <table class="table table-condense"> <caption>ozkary.com 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" ng-click="ctrl.print()">Print</button> <button class="btn btn-primary" ng-click="$close()">OK</button> </div> </div> </div> </script> <script type="text/ng-template" id="invoiceNoPrint"> <div id="print-content"> <div class="modal-header"> <h1>Invoice by ozkary.com</h1> </div> <div class="modal-body"> <table class="table table-condense"> <caption>ozkary.com 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" ng-click="ctrl.print()">Print</button> <button class="btn btn-primary" ng-click="$close()">OK</button> </div> </div> </div> </script> </script>