Okay i might have some even different approach.
I am aware that it won't suit everybody but nontheless someone might find it useful.
For those who do not want to pupup a new window, and like me, are concerned about css styles this is what i came up with:
I wrapped view of my app into additional container, which is being hidden when printing and there is additional container for what needs to be printed which is shown when is printing.
Below working example:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.people = [{
"id" : "000",
"name" : "alfred"
},
{
"id" : "020",
"name" : "robert"
},
{
"id" : "200",
"name" : "me"
}];
$scope.isPrinting = false;
$scope.printElement = {};
$scope.printDiv = function(e)
{
console.log(e);
$scope.printElement = e;
$scope.isPrinting = true;
//does not seem to work without toimeouts
setTimeout(function(){
window.print();
},50);
setTimeout(function(){
$scope.isPrinting = false;
},50);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-show="isPrinting">
<p>Print me id: {{printElement.id}}</p>
<p>Print me name: {{printElement.name}}</p>
</div>
<div ng-hide="isPrinting">
<!-- your actual application code -->
<div ng-repeat="person in people">
<div ng-click="printDiv(person)">Print {{person.name}}</div>
</div>
</div>
</div>
Note that i am aware that this is not an elegant solution, and it has several drawbacks, but it has some ups as well:
- does not need a popup window
- keeps the css intact
- does not store your whole page into a var (for whatever reason you don't want to do it)
Well, whoever you are reading this, have a nice day and keep coding :)
EDIT:
If it suits your situation you can actually use:
@media print { .noprint { display: none; } }
@media screen { .noscreen { visibility: hidden; position: absolute; } }
instead of angular booleans to select your printing and non printing content
EDIT:
Changed the screen css because it appears that display:none breaks printiing when printing first time after a page load/refresh.
visibility:hidden approach seem to be working so far.
