In Bahmni EMR we needed to support customizable html templates for printing patient regisatrtion card and other printable documents. We needed a print API which looks like
12345
//Contractprinter.print(templateUrl,data)//This would called on clicking the print buttonprinter.print('/config/registrationCardTempate.html',{patient:{name:'Ram Kumar',dateOfBirth:'1978-08-23',gender:'M'}})
As the app is built using angularjs, we decided to use angular as the templating engine for rendering these templates as well. This also helped to reuse filters and other templating features of angular. The implementation consists of following steps
Fetch the html template
Compile the html template with given data using angular’s $complile
Wait for angular to complete rendering the template (Explained here)
varprint=function(templateUrl,data){$http.get(templateUrl).success(function(template){varprintScope=angular.extend($rootScope.$new(),data);varelement=$compile($('<div>'+template+'</div>'))(printScope);varwaitForRenderAndPrint=function(){if(printScope.$$phase||$http.pendingRequests.length){$timeout(waitForRenderAndPrint);}else{printHtml(element.html());printScope.$destroy();// To avoid memory leaks from scope create by $rootScope.$new()}}waitForRenderAndPrint();});};