load template, compile, and print

Question

I have a view where users can see a partial view of they're total messages. I want to have a button that prints the entire history of messages.

The steps as I see them would be a directive that on click gets the history of messages, compiles a template with this data in the scope, and prints it. But I've been trying for some time now and have scoured the internet trying different suggestions from injecting into an iframe, a hidden div, etc. etc. but with no success.

Am I going about this the wrong way?

[UPDATE] Here's where i'm at. {{Message}} is never interpolated.

'use strict';
angular.module('casengo').directive('printMessages', [
'$log', '$window', '$compile', '$templateCache', 'CaseService', function($log, $window, $compile, $templateCache, CaseService) {

var printResults = function (mywindow) {
  mywindow.print();
  mywindow.close();
};

return {
  restrict: 'A',
  scope: {
    'case': '='
  },
link: function(scope, el, attr) {
  el.on('click', function () {
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<div id="printed" ng-repeat="message in scope.case.messages">{{message}}</div>');
    mywindow.document.write('</body></html>');

    var printContent = angular.element(mywindow.document.getElementById('printed'));

    if (scope.case.hasPrevious) {
      CaseService.loadPreviousMessages(scope.case.id, scope.case.messages[0].id, 0).then(function (res) {
          scope.case.hasPrevious = res.hasPrevious;
          if (res.messages) {
            Array.prototype.unshift.apply(scope.case.messages, res.messages);
          }
          $compile(printContent.contents())(scope);
          printResults(mywindow);
        });
      } else {
            $compile(printContent.contents())(scope);
            printResults(mywindow);
          }
        });
      }
    };
  }
]);

1. Set up id for your partial view (parent element) 2. Print the content as described e.g. here http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div (you already have messages. It's not necessary to get them again) — user2700840, Dec 15 '14 at 16:41
I'm not sure what you mean by 'set up id...'. I do have some of the messages but not all of them. I would like to take those partial messages, async call to get the rest, extend the original set of messages, then print, and return to original view with out changing the initial scope. — bluegreymouse, Dec 15 '14 at 17:56

score 0 · Answer 1 · answered Dec 15 '14 at 16:39

You could in theory use a directive for this need. You would either have a shared-scope directive, or isolated scope with the message history object passed to it. You would then use a partial (eg templateUrl: 'history.html') to template your results.

Do you have experience with directives? It's hard to help you further without some specific code to puzzle over.

Here are some thorough tutorials/explanations that can help you use directives properly: http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals http://www.sitepoint.com/practical-guide-angularjs-directives/ http://tutorials.jenkov.com/angularjs/custom-directives.html

Give your method a shot and check back in with us when you get stuck.

load template, compile, and print

1 Answers1