Angular，获取模板并将其填充到服务中

Question

我有一个打印服务，它有一个函数可以传递模板 url 和模板数据。

我需要用提供的数据以某种方式填充该模板，然后在新的 window 中打开它。这是我的想法的伪代码：

PrintWindow.printModal = function(data, template) {
get(template).success(function(data) {
    populatedTemplate = populate(template)
    var mywindow = window.open('', '_blank');
    mywindow.document.write('<html><head>');
    mywindow.document.write('</head><body>');
    mywindow.document.write(populatedTemplate);
    mywindow.document.write('</body></html>');
});
return true;

};

我怎样才能做到这一点？

Answer 1

想通了：

$http.get(template).success(function(data) {
    var templateElement = angular.element('<div></div>');
    templateElement.append(data);
    var clonedElement = $compile(templateElement)($scope.data);
    $timeout(function() {
        var printWindow = window.open('', '_blank');
        printWindow.document.write('<html><head>');
        printWindow.document.write('</head><body>');
        printWindow.document.write(clonedElement.html());
        printWindow.document.write('</body></html>');
    });
});

Answer 2

您需要在服务中提供一个范围，因此使用 $scope 对我不起作用。我必须创建一个新的 $rootScope。

这是我的代码：

module.exports = function ($compile, $templateCache, $timeout, $rootScope) {

  var printService = {};

  printService.createPrint = function(contentPassed) {

    var scope = $rootScope.$new();
    angular.extend(scope, contentPassed);

    var templateElement = angular.element('<div></div>');
    var content = $templateCache.get('document.template.print');
    templateElement.append(content);
    var clonedElement = $compile(templateElement)(scope);

    $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(clonedElement.html());
      w.document.write('</body></html>');
      w.document.close();
    });
  };

  return printService;

};

Angular，获取模板并将其填充到服务中

Angular, get a template and populate it in a service

templates

window

angularjs