Print a div using javascript in angularJS single page application

Question

I have a single page web application using angularJS. I need to print a div of certain page. I tried the following:

The page contains few div (print.html)

Answer 1

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);
			
			
		};
    
  });

	

		
Print me id: {{printElement.id}}
    
Print me name: {{printElement.name}}
	
	
	

    
    

      
Print {{person.name}}
    
  
  
  

	

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.