Creating a new html page from controller

2019-07-17 04:34发布

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?

标签： angularjs angularjs-directive

1条回答

Creating a new html page from controller

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间