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

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

javascript angularjs

Javascript 发出$http请求，用数据填充模板并打印出来,javascript,angularjs,Javascript,Angularjs,我正试图从jQuery世界转向Angular。我尝试移植到Angular的一个功能是使用AJAX打印。想法是在客户端定义模板，向服务器发出请求，填充模板并打印它。我用车把做到了： function drukuj(orderId, templateName) { var data; $.ajax({ //zapis contentType: "application/json; charset=utf-8", type: "PO

我正试图从jQuery世界转向Angular。
我尝试移植到Angular的一个功能是使用AJAX打印。想法是在客户端定义模板，向服务器发出请求，填充模板并打印它。我用车把做到了：

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);
        }
    });
};

现在我想把它转换成角度指令。这就是我所拥有的：

(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');
                    });
                };
            }
        };
    }
})();

（函数（）{
"严格使用",；
有棱角的
.module（'my.directions'，[]）
.directive（'printMe'，['$timeout'，'$window'，'$compile'，'$rootScope'，printMe]）；
函数printMe（$timeout、$window、$compile、$rootScope）{
返回{
限制：“A”，
编译：函数（）{
返回函数postLink（范围、元素、属性）{
var title=“默认标题”；
if（属性标题）{
title=attrs.title；
}
元素上（'click'，function（））{
打印（）；
});
函数打印（）{
var scope=$rootScope.$new（）；
角度。扩展（范围{
姓名：“我”，
项目：[{
数据：“一”
}, {
数据：“两个”
}, {
数据：“三”
}]
});
var template=angular.element（'{{item.data}}'）；
var linkFunction=$compile（模板）；
var结果=链接功能（范围）；
作用域：$apply（）；
log（result.html（））；
$timeout（函数（）{
var w=window.open（''，''，宽度=595，高度=842，滚动条=1'）；
w、 document.open（）；
w、 文件。写（“”）；
w、 文件。写（“”）；
w、 文件。书写（“”+标题+“”）；
w、 document.write（result.html（））；
w、 文件。写（“”）；
w、 document.close（）；
});
}
//销毁时的清理
作用域.$on（“$destroy”，函数（）{
元素。关闭（“单击”）；
});
};
}
};
}
})();

想法是将模板作为变量（从$templateCache获取，或者将其硬编码），数据作为变量（从$http请求），然后将它们编译成最终的html，这样我就可以将其放入新窗口并调用print

我尝试了和的解决方案，但我无法获得该html

我的创作是为了展示我现在的创作

我还是angular的新手，所以欢迎对我的指令发表任何评论。

我真是太傻了，事实上，即使在新窗口中，它也能很好地工作

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

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

var-template=angular.element（“{{item.data}”）；

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

Angularjs适用于单页应用程序。您不应该打开新窗口，而应该使用模态。看看这个：@Walfrat谢谢你的评论，我会调查的，但首先我必须解决打印问题。你可以使用这个问题的答案打印当前在你的页面中显示的内容（无论是否为模式）：@Walfrat我见过类似的方法，但谢谢你指出我。我的问题是从模板中获取最终（编译的）HTML。这是我的主要问题。我想你有说的html，问题是你试图把它放在一个新的窗口。我不知道angular是否能解决这个问题。如果Angular要处理ng应用程序中包装的内容，则ng应用程序中不存在新窗口。这就是我推荐模态方法的原因。