$mdMedia('print') not working as expected

[stillesjo]

Actual Behavior:

• What is the issue? *

I want to be able to use $mdMedia to distinguish in the code when the page is going to be printed or not. I tried using ng-if with $mdMedia('print') but didn't get the right content when the page is actually printed. I also tried a $scope.$watch expression which didn't trigger either.

I also noticed that if you use the chrome built in debug tools for toggling media options (such as print) you will actually get the expect content...

Link to forum post for this issue

• What is the expected behavior?

I expect that $mdMedia('print') will change content on pages that have ng-if or similar directives. I also expect angular to trigger $scope.$watch events when printing page.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:

http://codepen.io/stillesjo/pen/ENaMBM

• Details:

If you go to the debug-site of this pen and try to print it you will notice that the page contains the content that shouldn't be shown when printing. You will also never get a console.log for the $watch expression.

Angular Versions: *

• Angular Version:
  1.5.8
• Angular Material Version:
  1.1.0

Additional Information:

• Browser Type: *
  Google Chrome, Firefox

• Browser Version: *
  Google Chrome 54.0.2840.87, Firefox 48.0.2

• OS: *
  Windows 10, version 1607, OS Build 14393.447

• Stack Traces:
  No stack traces printed.

[Splaktar]

I was also able to reproduce this with Angular Material 1.1.1.

[clshortfuse]

I've forked your codepen for you to see this: https://codepen.io/shortfuse/pen/eBzqWg

I've manged to rework your code to make it work, but fixing it in the framework might be a bit of a headache. $mdMedia works by caching requests and calling an evalAsync function which causes it to always return false.

The reason is, all Javascript execution is paused when print() is called. Luckily, we can manipulate this somewhat as you can see in the codepen. I believe it ultimately comes down to change evalAsync to $apply, but I'll have to analyze the dangers in doing so. I can tell you now, that if you plan on triggering a print window over Javascript, make sure you don't call that from within a digest loop, but instead added after the Angular's stack (at the end of browser JS stack).

Edit: I will add that Firefox does not support print media queries at all.