Creating a new html page from controller

问题

I have an input form page, that when the user submits, it updates that page with some tables of data. If the user likes what they see, they should be able to print a cleaned up (no header nav, footer nav, etc) version of those tables with formatting intact.

I'm creating the tables using bootstrap and angularjs. What I'm trying to do is that when the uset clicks 'print', my angular controller grabs the desired content from the generated page (in a div called 'template') and inserts it into a new html page that I can then open in a new window for printing.

I created a directive that I was hoping would allow me to use $compile to transclude my data:

app.directive('printTemplate', function () {
    return {
        templateUrl: 'app/partials/printtemplate.html',
        replace: true,
        transclude: true,
        restrict: 'A'
    };
});

And in my controller:

$scope.printTemplate = function () {
    var page = angular.element(template).contents();
    var newpage = $compile("<html><body><div print-template>" + page + "</div></body></html>")($scope);
    var win = window.open();
    win.document.write(newpage);
    //win.print();
};

But this doesn't seem to do what I expect. And it feels like I'm doing it wrong. The idea was that because my data tables require bootstrap script and css references I need to include those in my printtemplate.html file.

Is there an easier/better way to do this, or what am I missing?

回答1:

Instead of trying to create a whole new page, why not simply use specific css for print media.

As always the w3 is the best place to start http://www.w3.org/TR/CSS2/media.html

来源：https://stackoverflow.com/questions/19865472/creating-a-new-html-page-from-controller

标签

angularjs

angularjs-directive