Question

我试图从jQuery世界转移到Angular 我尝试移植到Angular的功能之一是使用AJAX进行打印。想法是在客户端定义模板，向服务器请求，填充模板并打印它。我已经使用Handlebars完成了它：

function drukuj(orderId, templateName) {
    var data;

    $.ajax({
        //zapis
        contentType: "application/json; charset=utf-8",
        type: "POST",
        url: "AJAX.asmx/Print",
        data: "{orderId: " + orderId + "}",

        success: function(msg) {
            data = JSON.parse(msg.d);

            var template = Handlebars.getTemplate(templateName).done(function(tpl) {
                var html = tpl(data);
                $.print(html);
            }).fail(function(err) {
                alert(err);
            });
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
};

现在我试图将其转换为angular指令。这就是我所拥有的：

(function() {
    'use strict';

    angular
        .module('my.directives', [])
        .directive('printMe', ['$timeout', '$window', '$compile', '$rootScope', printMe]);


    function printMe($timeout, $window, $compile, $rootScope) {
        return {
            restrict: 'A',

            compile: function() {
                return function postLink(scope, element, attrs) {

                    var title = "Default title";

                    if (attrs.title) {
                        title = attrs.title;
                    }


                    element.on('click', function() {
                        print();
                    });

                    function print() {

                        var scope = $rootScope.$new();
                        angular.extend(scope, {
                            name: "Me",
                            items: [{
                                data: "One"
                            }, {
                                data: "Two"
                            }, {
                                data: "Three"
                            }]
                        });
                        var template = angular.element('<div ng-repeat="item in items">{{item.data}}</div>');
                        var linkFunction = $compile(template);
                        var result = linkFunction(scope);
                        scope.$apply();

                        console.log(result.html());


                        $timeout(function() {
                            var w = window.open('', '', 'width=595,height=842,scrollbars=1');
                            w.document.open();
                            w.document.write('<html><head>');
                            w.document.write('</head><body>');
                            w.document.write('<h1>' + title + '</h1>');
                            w.document.write(result.html());
                            w.document.write('</body></html>');
                            w.document.close();
                        });

                    }

                    // Cleanup on destroy
                    scope.$on('$destroy', function() {
                        element.off('click');
                    });
                };
            }
        };
    }
})();

想法是将模板作为变量（如果来自$ templateCache或将其硬编码），将数据作为变量（来自$ http请求）并将它们编译成最终的html，以便我能够把它放在新窗口并打印它。

我已尝试过this question和this的解决方案，但我无法获得该HTML。

我已创建Plunker以显示我目前创建的内容。

我仍然是棱角分明的新人，所以欢迎任何关于我的指令的评论。

Answer 1

嗯，这对我来说是愚蠢的，事实上，即使在新窗口中它也能很好地工作。

以下是答案：将当前模板包装在div中，无需其他更改：

var template = angular.element('<div><div ng-repeat="item in items">{{item.data}}</div></div>');

这是因为angular解析的指令可能不会创建htmlnode而是注释节点。所以你的result.html（）不起作用。只需将所有模板包装在DIV标签中，不要将任何指令绑定到它，你就可以了。

发出$ http请求，用数据填充模板并打印出来

1 个答案: