Compile an HTML template and initiate a printing operation only once the compilation process has finished

Question

Compile an HTML template and initiate a printing operation only once the compilation process has finished

While working on a directive's link function, my goal is to insert a compiled ad-hoc template into the DIV of a document and then proceed to print the window. I attempted the code below, and although the printer preview shows up, the data in it is still uncompiled.

// create a div
printSection = document.createElement('div');
printSection.id = 'printSection';
document.body.appendChild(printSection);

// Attempting to add a template to the div
scope.someVar = "This is print header";
var htmlTemplate = "<h1>{{someVar}}</h1>"; 
var ps = angular.element(printSection);
ps.append(htmlTemplate);
$compile(ps.contents())(scope);

// How can I ensure that the content inside printSection gets compiled properly 
// (I will eventually need to render a table using ng-repeat)

window.print();
// ... currently displays page with "{{someVar}}", instead of "This is print header"

I also wonder if $compile operates asynchronously? Can someone guide me on how to trigger window.print() only after compilation is complete?

angularjs angularjs-directive

Answer 1

Answer №1

To be able to print, you just need to finish the current digestion process.

Instead of using window.print();, try using:

_.defer(function() {
    window.print();
});

or utilize $timeout, or any deferred handler.

Another approach (likely the 'correct' method) is to ensure that the newly compiled content's watchers execute before exiting the current $apply phase :

module.factory("scopeUtils", function($parse) {

        var scopeUtils = {

            /**
             * Apply watchers of given scope even if a digest progress is already in process on another level.
             * This will only do a one-time cycle of watchers, without cascade digest.
             *
             * Please note that this is (almost) a hack, behavior may be hazardous so please use with caution.
             *
             * @param {Scope} scope : scope to apply watchers from.
             */
            applyWatchers : function(scope) {
                scopeUtils.traverseScopeTree(scope, function(scope) {
                    var watchers = scope.$$watchers;
                    if(!watchers) {
                        return;
                    }
                    var watcher;
                    for(var i=0; i<watchers.length; i++) {
                        watcher = watchers[i];
                        var value = watcher.get(scope);
                        watcher.fn(value, value, scope);
                    }
                });
            },

            traverseScopeTree : function(parentScope, traverseFn) {
                var next,
                    current = parentScope,
                    target = parentScope;
                do {
                    traverseFn(current);

                    if (!(next = (current.$$childHead ||
                        (current !== target && current.$$nextSibling)))) {
                        while(current !== target && !(next = current.$$nextSibling)) {
                            current = current.$parent;
                        }
                    }
                } while((current = next));
            }

        };

        return scopeUtils;
    });

Usage example:

scopeUtils.applyWatchers(myFreshlyAddedContentScope);

Answer 2

To be able to print, you just need to finish the current digestion process.

Instead of using window.print();, try using:

_.defer(function() {
    window.print();
});

or utilize $timeout, or any deferred handler.

Another approach (likely the 'correct' method) is to ensure that the newly compiled content's watchers execute before exiting the current $apply phase :

module.factory("scopeUtils", function($parse) {

        var scopeUtils = {

            /**
             * Apply watchers of given scope even if a digest progress is already in process on another level.
             * This will only do a one-time cycle of watchers, without cascade digest.
             *
             * Please note that this is (almost) a hack, behavior may be hazardous so please use with caution.
             *
             * @param {Scope} scope : scope to apply watchers from.
             */
            applyWatchers : function(scope) {
                scopeUtils.traverseScopeTree(scope, function(scope) {
                    var watchers = scope.$$watchers;
                    if(!watchers) {
                        return;
                    }
                    var watcher;
                    for(var i=0; i<watchers.length; i++) {
                        watcher = watchers[i];
                        var value = watcher.get(scope);
                        watcher.fn(value, value, scope);
                    }
                });
            },

            traverseScopeTree : function(parentScope, traverseFn) {
                var next,
                    current = parentScope,
                    target = parentScope;
                do {
                    traverseFn(current);

                    if (!(next = (current.$$childHead ||
                        (current !== target && current.$$nextSibling)))) {
                        while(current !== target && !(next = current.$$nextSibling)) {
                            current = current.$parent;
                        }
                    }
                } while((current = next));
            }

        };

        return scopeUtils;
    });

Usage example:

scopeUtils.applyWatchers(myFreshlyAddedContentScope);

Compile an HTML template and initiate a printing operation only once the compilation process has finished

Answer №1

Similar questions

Angular: Incorporate a unique random number into each request to prevent caching in Internet Explorer

Upgrade from AngularJS to the latest version of Angular, version 8

Guide on creating a custom directive called 'ng-let' to associate an expression with a variable

Leveraging ng-switch for template swapping

Tips for Implementing {{ }} within Angular Filters in Nested ng-repeat statements

Create a tab layout in Ionic Framework that closely resembles the design and

The AngularJS OpenLayers directive encounters issues when used inside an Angular-UI dialog component

Shut down the angular modal

The processed value is not immediately returned by DataSnapshot.val()

Encountering a 405 Method Not Allowed error when using Laravel in conjunction with AngularJS

Tips for creating an array within an AngularJS Service and effectively sharing it across two controllers

Sorting and filtering data using AngularJS filter and orderBy inside a controller or factory

The AngularJS upload function is returning false when checking Request.Content.IsMimeMultipartContent

Unexpected behavior encountered when using the $http.post method

AngularJS view not properly refreshing after async operation completes

Challenges arise when attempting to store data from a Form into a mongodb collection

Invoking a Directive within another Directive

"Permission denied to access restricted URI" error encountered while attempting to utilize ng-template functionality

The calendar fails to display events once the $scope.splice(0) and $scope.push(event) functions are executed

Adjust the height of each child element to be half of the fixed height of the parent